Chakra-UI

I♥️Components

Grid Layout

|

Chakra Docs

|

⦾ Chakra UI provides a Grid component which is a primitive component for all grid related CSS. It helps to create flexible and responsive grid layouts. Here's a brief overview:
  • Grid Template: Grid uses the templateColumns, templateRows, templateAreas props to create a grid template.
  • Gap: The gap property (a shorthand for rowGap and columnGap) can be used to set the gaps (gutters) between rows and columns. It's responsive and theme-aware.
  • Auto Columns and Rows: You can use the autoColumns and autoRows props to specify the size of the rows and columns when they are created with grid auto-placement algorithms.
  • Grid Item Placement: GridItem is a component that can be a child of Grid. You can control placement of GridItem with the colSpan, rowSpan, colStart, colEnd, rowStart, and rowEnd props.
  • Responsive Design: All of the grid-related props accept responsive array values or object values to apply different styles at different breakpoints.
  • Other Box Props: Since Grid is a Box, you can use all the Box props for spacing, color, typography, and more, in addition to the grid-specific props.

These are just some of the key properties provided by the Grid component. Using Chakra UI's Grid component, you can build most of the complex and responsive grid layouts in a clean and straightforward manner.


Remember that these properties are part of CSS Grid Layout, so they have broad browser support. But, as always, test your designs in multiple browsers to ensure compatibility.

These components can be imported as follows:

Examples

Box One
Box Two
Box Three

Code

Item One

Some info...

Details...

Item Two

Some info...

Details...

Item Three

Some info...

Details...

Code

Thing One

Thing Two

Thing Three

Alice

Bob

Charlie

Dave

Code

Auto Columns and Rows: Let's say we're creating a grid to display profile cards. We don't know how many profiles we'll have, so we let the grid auto-place them. Each card should be at least 200px wide and 20px tall.

In this example, we're mapping over an array of profile names and creating a Box for each one. The Grid automatically creates rows and columns as needed, ensuring that each Box is at least 125px tall and 20px wide.

Widget 1
Widget 2
Widget 3
Widget 4
Widget 5

Code

Grid Item Placement: Let's imagine a dashboard with various widgets. We can use colSpan to specify that certain widgets should span multiple columns.

In this example, "Widget 2" spans two columns, while the rest of the widgets only span one. The colSpan property is used to control this.

Gallery
Gallery
Gallery
Gallery
Gallery

Code

Responsive Design: Let's create a responsive image gallery that displays images in a grid. The grid has 1 column on extra small screens, 2 columns on small screens, and 3 columns on medium and larger screens.

In this example, we're mapping over an array of image URLs and creating an Image for each one inside a Box. The Grid changes its column layout based on the screen size: 1 column for base (extra small), 2 columns for small, and 3 for medium and above.

Did you know?

Creative Idea No. 1

With Chakra UI's Grid component, you can create responsive layouts using array-based syntax? It's not just about defining a fixed number of columns or rows. You can define different numbers of columns or rows based on the size of the viewport. This allows for highly responsive designs with less code.
In the following example, the Grid component has one column for extra small screens, two for small screens, and three for medium and larger screens.
One
Two
Three

Code

Creative Idea No. 2

Chakra UI's Grid component uses CSS Grid Layout under the hood? This means you have access to properties like grid-auto-flow, which lets you control the direction in which items are placed in the grid. You can create interesting and dynamic layouts that aren't limited to a top-to-bottom, left-to-right flow.
In this example, the Grid component will first try to fill each column before moving on to the next row.

Code

Creative Idea No. 3

Chakra UI's Grid component supports auto-fit and auto-fillkeywords? These are powerful tools for creating flexible and responsive layouts that adapt to the content. For instance, with auto-fit, the grid will create as many columns as it can fit into the container and will expand the columns to fill any leftover space when there are fewer items than columns.
In the following example, the Grid component will automatically adjust the number of columns based on the minimum size specified. If a new column cannot fit into the container, it's added as a new row instead.
One
Two
Three

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.