Chakra-UI

I♥️Components

Layout

|

Chakra Docs

|

⦾ In Chakra UI, controlling the dimensions of a component, i.e., its width and height, is straightforward. Chakra provides utility props to adjust these dimensions as per your needs. Here is an overview:

  • Width: You can control the width of a component using the w or width prop.
  • Height: You can control the height of a component using the h or height prop.
  • Min/Max Width and Height: You can control the minimum and maximum dimensions of a component using the minW, maxW, minH, and maxHprops
  • Box Sizing: Chakra UI sets the box-sizing property to border-box globally. This means padding and border are included in an element's total width and height. You don't have to worry about adding padding or border to a box and accidentally making it larger than you expected
  • Display: The display property determines the type of rendering box used for an element. You can use the display prop to control this
  • Size: For square components where width and height are equal, you can use the size prop to set both at once

By using these properties, you can create flexible layouts that adapt to different screen sizes and provide a great user experience.

To import the Box component used below:

Examples

width="100%" height={12}
w="100%" h="32px"
boxSize="sm"

w={256}

w='120px'

This is a responsive box

You can use different units like em, rem, %, and px. You can also use string literals like "full" to set the width to 100%, or "auto" to let the browser calculate the width. For responsive design, you can provide an array or an object with different values for different breakpoints

This is a responsive box

As with width, you can use various units, or literals like "full" and "auto". You can also specify different heights for different breakpoints.

This box has a minimum and maximum width.
This box has a minimum and maximum height.
This box is a flex container.

This box is an inline-block element.

Did you know?

Creative Idea No. 1

Chakra UI provides a built-in CSS grid system that allows you to create complex and responsive grid layouts easily. You can use the Grid component and its related props to define the number of columns, column widths, row gaps, and more. In this example, the Grid component is used to create a 3-column grid layout with equal column widths (1fr). The gap prop sets the gap between grid items. You can customize the number of columns, column widths, and gaps according to your layout requirements.

Code

Creative Idea No. 2

Chakra UI's Stack component provides a convenient way to stack elements vertically or horizontally. It automatically handles spacing and alignment between the elements. In this example, the Stack component stacks the elements vertically (direction="column") with a spacing of 4. You can change the direction to "row" for horizontal stacking. The Stack component automatically manages the spacing between the elements, making it easy to create vertically or horizontally aligned layouts.

Code

Creative Idea No. 3

Chakra UI offers a responsive Wrap component that allows content to wrap onto multiple lines based on the available space. This is useful for creating responsive grids or wrapping items in a container when they exceed the container's width. In this example, the Wrap component is used to wrap the WrapItemcomponents onto multiple lines based on the available space. The spacing prop defines the gap between the wrapped items. This allows you to create responsive grids or wrap elements in a container, ensuring they stay within the container's width.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.