Chakra-UI

I♥️Components

Simple Grid

|

Chakra Docs

|

⦾ The SimpleGrid component in Chakra UI is a powerful tool that enables developers to create responsive grid layouts with ease. By providing a friendly interface and a range of configurable options, SimpleGrid simplifies the process of designing and implementing complex grid structures.

The SimpleGrid component offers several props that allow you to customize its behavior and appearance. Let's take a closer look at each of these props:

  • Specifying Columns: This prop specifies the number of columns for the grid layout. By setting the columns value to an integer, you can create a fixed number of columns.
  • Responsive Value Columns: To make the grid responsive, you can pass an array or an object of values to the columns prop. This enables the grid layout to adjust based on different screen sizes.
  • Auto-Responsive Grid: Instead of explicitly specifying the number of columns, you can rely on the auto-responsive behavior of SimpleGrid. By setting the minChildWidth prop, you define the minimum width a child element should have before the layout adjusts. This approach uses CSS grid's auto-fit and minmax() internally
  • Column and Row Spacing: SimpleGrid allows you to modify the spacing between grid items. You can use the spacing prop to change both row and column spacing uniformly, or use spacingX and spacingY to define spacing for columns and rows separately.

The Chakra UI SimpleGrid component simplifies the creation of responsive grid layouts. Its flexible props and subcomponents can help developers achieve versatile grid structures while maintaining a responsive design.

The SimpleGrid component can be imported as follows:

Examples

Fixed Number of Columns

⦾ In this example, we create a SimpleGrid with three columns and a spacing of 10 pixels. Each grid item is represented by a Box component a height of 80 pixels.
Container 1
Container 2
Container 3
Container 4
Container 5

Code

Responsive Columns

⦾ In this example, we create a SimpleGrid with varying column numbers based on different screen sizes. The grid adapts to display two columns by default, three columns on medium-sized screens, and two columns again on small screens.
Container 1
Container 2
Container 3
Container 4
Container 5

Code

Auto-Responsive Grid

⦾ Here, we utilize the auto-responsive behavior of SimpleGrid by specifying a minimum child width of 120 pixels. The grid adjusts itself automatically based on the available space, ensuring that each child element meets the minimum width requirement.
Container 1
Container 2
Container 3
Container 4
Container 5

Code

Customized Spacing

⦾ In this example, we modify the spacing between grid items by setting the spacingX and spacingY props. The grid consists of two columns, with 40 pixels of horizontal spacing and 20 pixels of vertical spacing.
Container 1
Container 2
Container 3
Container 4
Container 5

Code

Did you know?

Creative Idea No. 1

Dynamic Image Gallery: With SimpleGrid, you can create a stunning image gallery that dynamically adjusts the size of each image based on the available space. This provides a visually pleasing and responsive experience for users. The following image grid is set to have three columns when space allows, but will adjust to one column otherwise.
Image 1
Image 2
Image 3

Code

Creative Idea No. 2

Interactive Comparison Cards: SimpleGrid can be used creatively to display interactive comparison cards, making it easy for users to compare different options or features. These cards are completely responsive, adjusting each element to fit the available space at each screen size level.

Basic

$9.99/mo

Feature 1
Feature 2
Feature 3

Pro

$19.99/mo

Feature 1
Feature 2
Feature 3
Feature 4

Premium

$29.99/mo

Feature 1
Feature 2
Feature 3
Feature 4
Feature 5

Code

Creative Idea No. 3

Data Dashboard Cards: SimpleGrid can be used to build a data dashboard that displays different metrics and information cards in a grid layout. This allows users to have a comprehensive overview of the data at a glance.

Users

1,500

Revenue

$50,000

Sales

500

Rate

25%

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.