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:
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.
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.
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
Creative Idea No. 2
Creative Idea No. 3