Chakra-UI

I♥️Components

Grid

|

Chakra Docs

|

Background: CSS Grid

⦾ CSS Grid is a powerful layout system in CSS that allows you to create complex grid-based layouts for web pages. It introduces a two-dimensional grid structure, enabling precise control over the placement and alignment of elements within the grid.

Here are some key concepts and features of CSS Grid:

  • Grid Container: The parent element that contains all the grid items. It is defined by the display: grid property.
  • Grid Item: The child elements of the grid container. They are defined by the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties.
  • Grid Line: The horizontal and vertical lines that divide up the grid structure. They are defined by the grid-column and grid-row properties. Grid lines can be numbered or named for easier reference.
  • Grid Track: The space between two adjacent grid lines. They are defined by the grid-template-columns and grid-template-rows properties.
  • Grid Template: The configuration of rows, columns, and areas within the grid. It is defined using properties like grid-template-rows, grid-template-columns, and grid-template-areas.
  • Grid Cell: The space between two adjacent grid lines. They are defined by the grid-template-columns and grid-template-rows properties.
  • Grid Area: The space between two adjacent grid lines. They are defined by the grid-template-columns and grid-template-rows properties.
  • Grid Placement: The process of positioning grid items within the grid. Items can be placed explicitly using line numbers, named areas, or using properties like grid-row and grid-column.
  • Grid Alignment: The ability to align grid items within their grid cells or the grid container using alignment properties like justify-items, align-items, justify-content, and align-content.

Chakra UI Grid

⦾ Chakra UI's Grid component abstracts away the complexities of CSS Grid by providing a clean and declarative API. It encapsulates the underlying CSS Grid concepts and properties, allowing you to create sophisticated grid layouts with ease.

By using Chakra UI's Grid component, you can achieve consistent and responsive grid layouts throughout your application. It streamlines the process of creating grids, reduces the amount of code you need to write, and enhances the overall developer experience.

  • Grid: The main wrapper that applies the grid layout. It utilizes the CSS display: grid property to establish a grid container.
  • GridItem: Used as a child of Grid to control the span and start positions within the grid. It allows you to specify the width, height, and background color of each grid item.

These components can be imported as follows:

Examples

Template Columns

⦾ Template columns allow you to define the structure and sizing of columns within a grid layout. When using template columns, you can specify the width of each column individually or use predefined values like percentages, fractions, or fixed units such as pixels. You can also use the repeat() function to specify the number of columns and their width. This provides flexibility in creating responsive grid layouts that adapt to different screen sizes and content requirements.

Grid's variety with template columns provides flexibility in creating responsive grid layouts that adapt to different screen sizes and content requirements. Thus, by utilizing template columns, you have control over the layout and width of individual columns within the grid, enabling you to create versatile and responsive designs.

In the following example, you can experiment with the number of columns that compose the grid. This kind of immediate visual feedback offers a more intuitive understanding of how grid works.

Col 1

Col 2

Col 3

Code

The next few examples show various configurations of template columns.

<Grid templateColumns="1fr 1fr 1fr">
Column 1
Column 2
Column 3
<Grid templateColumns="33% 33% 33%">
Column 1
Column 2
Column 3
<Grid templateColumns="100px 1fr 1fr">
Column 1
Column 2
Column 3
<Grid templateColumns="sidebar-start 1fr 1fr"templateColumnAreas="'sidebar-start content content'">
Column 1
Column 2
Column 3

Column and Row Span

⦾ Column span and row span allow you to control the size and position of elements within a grid layout. Column span determines the number of columns an element should occupy horizontally within the grid. By specifying a column span value, you can make an element stretch across multiple columns, creating wider or narrower cells. For example, a column span of 2 would make an element take up the space of two columns, while a column span of 3 would occupy three columns, and so on.

Row span, on the other hand, controls the number of rows an element should occupy vertically within the grid. Similar to column span, it allows you to make an element taller or shorter by specifying the number of rows it should span. For instance, a row span of 2 would make an element take up the space of two rows, while a row span of 3 would occupy three rows, and so forth.

By combining column span and row span, you can create more complex grid layouts where elements can span across multiple columns and rows, allowing for greater flexibility in arranging and positioning content within the grid. These features empower you to design responsive and dynamic interfaces that adapt to various screen sizes and content requirements.

templateRows="repeat(2, 1fr)"templateColumns="repeat(5, 1fr)"
rowSpan={2}colSpan={1}
colSpan={4}
colSpan={2}
colSpan={2}

Code

Starting and Ending Lines

⦾ Starting lines and ending lines refer to the positional markers that determine where an element begins and ends within the grid layout. They are used in conjunction with the column and row definitions to precisely position elements.

Starting lines indicate the grid line where an element should start. Grid lines can be numbered or named, depending on how you define your grid. For example, you can specify that an element should start at the first column line, or you can use a named line like " sidebar-start" if you've defined custom grid lines.

Ending lines, on the other hand, indicate the grid line where an element should end. By specifying the ending line, you determine the extent or limit of the element within the grid layout. This can be a numbered line or a named line, similar to the starting line.

Using starting and ending lines, you can control the precise placement and size of elements within the grid. For example, you can specify that an element should start at the second column line and end at the fourth column line, effectively making it span across two columns. Similarly, you can set an element to start at the third row line and end at the fifth row line, spanning three rows vertically.

By manipulating the starting and ending lines, you have fine-grained control over the positioning and size of elements within the grid, allowing you to create complex and responsive layouts.

Below are some examples of Grid components with specified starting and ending lines.

Element A
Element B
Element C

Code

This example is made up of a 3 x 3 grid:

  • Element A starts at row 1 and ends at row 3, and it starts at column 1 and ends at column 3, spanning across two rows and two columns.
  • Element B starts at row 2 and ends at row 4, and it starts at column 2 and ends at column 4, spanning across two rows and two columns.
  • Element C does not have explicit starting and ending lines defined, so it takes up one row and one column by default.
Element A
Element B
Element C
Element D

Code

In this example, we have a responsive grid layout:

  • The columns are defined using repeat(auto-fit, minmax(200px, 1fr)), which means the columns will automatically adjust their width to fit the available space, with a minimum width of 90px and a maximum of 1 fraction of the available space.
  • Element A starts at row 1 and spans 2 rows, starting at column 1 and spanning 1 column.
  • Element B starts at row 1 and ends at row 2, starting at column 2 and ending at column 4, spanning 1 row and 3 columns.
  • Element C starts at row 2 and ends at row 3, starting at column 2 and ending at column 3, spanning 1 row and 1 column.
  • Element D starts at row 2 and ends at row 3, starting at column 3 and ending at column 4, spanning 1 row and 1 column.

Template Areas

⦾ Template areas allow you to create complex grid layouts by defining named areas within the grid and assigning elements to these areas. In CSS Grid, template areas provide a higher-level abstraction for grid layouts, making it easier to visually understand and design grid-based structures, thanks to the placement and arrangement of elements using named areas, rather than specifying exact starting and ending lines for each element.

The importance of template areas in CSS Grid lies in their ability to enhance readability, maintainability, and flexibility when working with grid layouts. By using named areas, you can define the structure of your grid in a more intuitive and visual manner, making it easier to communicate and collaborate with other developers or designers.

Chakra UI's Grid component supports template areas by providing thetemplateAreas prop. With this prop, you can define the areas of your grid using a string-based syntax. Each line in the string represents a row, and each word within a line represents a named area for a column. By assigning the same name to multiple grid cells, you can create spanning areas that allow elements to occupy multiple cells.

Header
Sidebar
Content
Footer

In this example, we have a grid with three rows and three columns, and we're using template areas to define the layout. The areas are named "header", "sidebar", "content", and "footer". The Box components are assigned to these areas using the gridArea prop, which ensures they occupy the corresponding cells within the grid.

Code

Did you know?

Creative Idea No. 1

Avatar Gallery: The Grid component from Chakra UI is a flexible and efficient way to layout content. The usage here relies on CSS Grid and it gives us the ability to define a responsive grid system with a clean, readable syntax. The avatars are arranged in this grid, and every avatar alternates between two sizes at a certain interval.

Jasper Jenkins

Sheila Norris

Manny Parker

Joseph Duncan

Lori Perez

Felix Miles

Code

Creative Idea No. 2

Responsive Dashboard Layout: You can use the Grid component to create a responsive dashboard layout. With grid templates, you can structure your dashboard with multiple panels and widgets that adapt to different screen sizes, providing an optimal user experience. In this example, the grid layout is set to have a flexible number of columns, and the rows are equally distributed. The areas within the grid are assigned using gridArea to create the top, middle, and bottom section.

Bienvenue!

Welcome to Louise the Llama's website! Discover the adventures of Louise, the most fashionable llama in the world.

Louise the Llama

Stay Tuned!

Follow Louise as she conquers the fashion industry with her unique sense of style and irresistible charm. Stay tuned for llama fashion tips, behind-the-scenes drama, and exclusive interviews with other stylish animals.

Connect!

Join Louise's fan club and receive exclusive llama-themed goodies.

Code

Creative Idea No. 3

Masonry-Style Grid Layout: This is a popular design pattern where items are positioned optimally, creating a dynamic and visually appealing arrangement. In a Masonry grid, items are positioned in such a way that they fill the available horizontal space while maintaining a balanced and visually pleasing arrangement. This means that shorter items will be placed in the empty spaces below taller items, creating a cascading effect.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.