CSS Grid Layout Module

Introduction

The Grid Layout module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

Overview

Flexible Box is the single-axis–oriented Layout. Grid Layout is optimized for 2-dimensional layouts those alignment of content is desired in both dimensions.

Concepts and Terminology

In grid layout, the content of a grid container is laid out by positioning and aligning it into a grid. The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container`s space into grid areas. Grid items must be placed into a grid container. There are two sets of grid lines: one set defining columns that run along the block axis, and an orthogonal set defining rows along the inline axis.

Grid lines

Grid lines are the horizontal and vertical dividing lines of the grid. A grid line exists on either side of a column or row. They can be referred to by numerical index, or by an author-specified name. A grid item references the grid lines to determine its position within the grid using the grid-placement properties.

Grid Tracks and Cells

A grid track is a generic term for a grid column or grid row. It is the space between two adjacent grid lines. Each grid track is assigned a sizing function, which controls how wide or tall the column or row may grow. Adjacent grid tracks can be also separated by gutters.

A grid cell is the intersection of a grid row and a grid column. It is the smallest unit of the grid that can be referenced when positioning grid items.

Grid Areas

A grid area is the logical space used to lay out one or more grid items. A grid area consists of one or more adjacent grid cells. It is bound by four grid lines, one on each side of the grid area. A grid area can be named explicitly using the grid-template-areas property of the grid container, or referenced implicitly by its bounding grid lines. A grid item is assigned to a grid area using the grid-placement properties.

Grid items

The grid items of a grid container are boxes representing its inflow contents. Each in-flow child of a grid container becomes a grid item.

Nested items

A grid item can itself be a grid container by giving it display: grid. In the general case the layout of this nested grid`s contents will be independent of the layout of the parent grid it participates in.

Subgridded Items

In some cases it might be necessary for the contents of multiple grid items to align to each other. A nested grid can defer the definition of its rows and/or columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the parent grid, allowing the contents of both grids to align.

Defining the Grid

Grid container

To define grid containers, we need to set the grid or inline grid values for the display property.

grid this value causes an element to generate a grid container box that is block-level when placed in flow layout.

inline-grid this value causes an element to generate an grid container box that is inline-level when placed in flow layout.

Creation

After adding display: grid, all child elements of the container become grid-items.

								
									

										
1
										
2
										
3
										
4
										
5
										
6
										
7
										
8
										
9
									
									// - CSS
									.grid {
										display: grid;
									}
								
							

Explicit grid

After creating a grid container, an explicit grid will be defined. If you do not specify the number of columns and rows, it will be the first cell of the grid. All other cells will be placed in an implicit grid.

For rows/columns of an explicit grid, we can control their number, height/width using the properties: grid-template-columns, grid-template-rows.

									
										.grid {
											display: grid;
											grid-template-rows: 50px;
										}
									
								

Implicit grid

For all elements that did not have enough space in the explicit grid, an implicit grid is created by the grid container.

For rows/columns of an implicit grid, we can control their height/width using the properties: grid-auto-columns, grid-auto-rows.

									
										.grid {
											display: grid;
											grid-template-rows: 50px;
											grid-auto-rows: 30px;
										}
									
								

Columns management

To create multiple columns, we need to write down the sizes of the columns separated by a space in the property:

grid-template-columns: column-width column-width column-width;

									
										.grid {
											display: grid;
											grid-template-rows: 50px;
											grid-template-columns: 100px
																					   50px
																					   75px;
										}
									
								

Rows management

To create multiple rows, we need to write down the sizes of the rows separated by a space in the :

grid-template-rows: row-height row-height;

									
										.grid {
											display: grid;
											grid-template-rows: 75px 50px;
											grid-template-columns: 100px
																					   50px
																					   75px;
										}
									
								

Grid gutters

Gutters are used to separate tracks. We can set gutter values for columns and rows simultaneously using the grid-gap property.

									
										grid-gap: 5px;
									
								

You can also set gutter sizes separately for columns using column-gap and for rows using the row-gap property.

									
										column-gap: 10px;
										row-gap: 5px;
									
								

Size management

This part describes grid track sizes management and the units of measurement used.

Fixed sizes

The size of tracks can be set using any unit of length.

In this example the dimensions in pixels are used.

								
									.grid {
										display: grid;
										grid-template-columns: 100px
																					50px
																					100px;
										grid-template-rows: 75px
																					50px
																					20px;
									}
								
							

Sizes in percent

The grid container allows you to use percentages for a set of sizes. At the same time, if the sum of the dimensions is less than one hundred percent, the grid elements will not fill it completely.

									
										.grid {
											display: grid;
											grid-template-columns: 20%
																						50%
																						30%;
											grid-template-rows: 50%
																						25%
																						25%;
										}
									
								

Sizes in fraction

An additional unit fr of length has been developed specifically for Grid Layout. It allows you to create flexible grid tracks and represents a fraction of the free space of the container.

									
										.grid {
											display: grid;
											grid-template-columns:
															1fr 1fr 1fr;
											grid-template-rows:
															1fr 1fr 1fr;
										}
									
								

									
										.grid {
											display: grid;
											grid-template-columns: 
															1fr 2fr 1fr;
											grid-template-rows:
															1fr 2fr 1fr;
										}
									
								

Combining units

It is possible to combine different measurement units.

									
										.grid {
											display: grid;
											grid-template-columns: 50px
																						20%
																						1fr;
											grid-template-rows: 20px
																						50%
																						1fr;
										}
									
								

Auto size

It is possible to use the auto value to determine track sizes. In this case, the size of the track will be set to the size of the content.

								
									.grid {
										width: 200px;
										height: 200px;
										display: grid;
										grid-template-columns: auto 20% 1fr;
										grid-template-rows: auto 50% 1fr;
									}
								
							

Additional

This part describes additional functions.

Naming Grid Lines

Line names can make the grid-placement properties easier to understand and maintain. Line names can be explicitly assigned with the grid-template-rows and grid-template-columns properties, or implicitly assigned by named grid areas with the grid-template-areas property.

								
									.grid {
										grid-template-columns: 
										[first] auto [second] 20% [third] 1fr [fourth];
										grid-template-rows: 
										[header-start] auto [main-start] 50% 
										[footer-start] 1fr [footer-end];
									}
								
							

Repeating Rows and Columns

The repeat() notation represents a repeated fragment of the track list to be written in a more compact form.

								
									grid-template-columns: 100px 100px 100px;
									grid-template-columns: 1fr 1fr 1fr;
									grid-template-rows: 100px 100px 100px;
									grid-template-rows: 1fr 1fr 1fr;
									grid-template-columns: 1fr 100px 1fr 100px;
								
							

These records have the same meaning.

								
									grid-template-columns: repeat(3, 100px);
									grid-template-columns: repeat(3, 1fr);
									grid-template-rows: repeat(3, 100px);
									grid-template-rows: repeat(3, 1fr);
									grid-template-columns: repeat(2, 1fr 100px);
								
							

fit-content

The fit-content value allows the track to adjust to the size of the content, but only up to the specified limit.

								
									grid-template-columns: fit-content(200px) 1fr 1fr;
								
							

minmax

The minmax() function is used to limit the maximum and minimum sizes of the grid track. It defines a track size range greater than or equal to min and less than or equal to max.

								
									grid-template-columns: 1fr minmax(100px, 150px) 1fr;
								
							

Grid areas

A grid area is the logical space used to lay out one or more grid items. A grid area consists of one or more adjacent grid cells. It is bound by four grid lines, one on each side of the grid area, and participates in the sizing of the grid tracks it intersects. A grid area can be named explicitly using the grid-template-areas property of the grid container, or referenced implicitly by its bounding grid lines.

Grid areas example

Consider an example of a simple page to understand how grid areas work.

If we set the structure specified below, we will get an incorrect result.

									
										

											
Header
											
											
Main
											
											
										
										display: grid;
										grid-template-columns: 1fr 3fr 1fr;
										grid-template-rows: 100px 1fr 100px;
									
								

Grid areas example (continue)

To get the desired page structure, we need to set names for the grid zones using the grid-template-areas property. And then set the grid element area using the grid-area property.

									
										.grid {
											display: grid;
											grid-template-columns: 1fr 3fr 1fr;
											grid-template-rows: 100px 1fr 100px;
											grid-template-areas: "header header header"
																"aside content nav"
																"footer footer footer";}
											.header {grid-area: header;}
											.aside {grid-area: aside;}
											.content {grid-area: content;}
											.nav {grid-area: nav;}
											.footer {grid-area: footer;}
									
								

Grid template

Instead of using properties grid-template-columns and grid-template-rows, you can use property grid-template to specify the grid area.

							
									grid-template-rows: repeat(3, 1fr);
									grid-template-columns: repeat(3, 1fr);
									// we can replace by
									grid-template: repeat(3, 1fr) / repeat(3, 1fr);
							
						

At first, we must specify rows and after through the / columns. The result will be the same.

Grid template advanced

In case using named areas, we can use a more complex template of the following type. At first, we specify the start operator to start the row, then we write down the column names, then we specify the row height and the row closing operator. A new line starts with the closing statement of the previous line. The template is closed with the roe-end operator. After that, column widths are specified after the / operator.

							
									grid-template-columns: 1fr 3fr 1fr;
									grid-template-rows: 100px 1fr 100px;
									grid-template-areas: "header header header"
															"aside content nav"
															"footer footer footer";
									// we can replace by
									grid-template: [start] "header header header" 100px [row2]
									[row2] "aside content nav" 1fr [row3]
									[row3] "footer footer footer" 100px [row-end] / 1fr 3fr 1fr;
							
						

Grid auto flow

The grid-auto-flow property controls auto-placement of grid items without an explicit position. Once the explicit grid is filled (or if there is no explicit grid) auto-placement will also start the generation of implicit grid tracks.

Grid auto flow

If grid-auto-flow property equals row, auto-placement will create new rows for grid tracks.

								
									grid-auto-flow: row;
								
							

Elements with numbers from 10 to 14 are have not explicit grid because the grid has three row and columns in this example.

Grid auto flow

If grid-auto-flow property equals column, auto-placement will create new columns for grid tracks.

								
									grid-auto-flow: column;
								
							

Elements with numbers from 10 to 14 are have not explicit grid because the grid has three row and columns in this example.

Grid items

Grid items in Grid Layout have some special features.

1. Inline elements, that are placed in a grid container, acquire the properties of block elements.

2. Margins of grid container elements do not collapse.

Grid items placement

Grid elements can be placed in grid using properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end.

All of these properties have a default value auto. It means that grid items are placed in the grid automatically.

									
										grid-row-start: auto;
										grid-row-end: auto;
										grid-column-start: auto;
										grid-column-end: auto;
									
								

Grid items placement

We can influence the behavior of grid elements by changing properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end.

									
									.el1 {
										grid-row-start: 1;
										grid-row-end: 3;
										grid-column-start: auto;
										grid-column-end: auto;
									}
									.el7 {
										grid-row-start: auto;
										grid-row-end: auto;
										grid-column-start: 2;
										grid-column-end: 3;
									}
									
								

Grid items placement

We can place a grid element anywhere in the grid, regardless of its position in the html code by changing properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end.

									
									.el1 {
										grid-row-start: 2;
										grid-row-end: auto;
										grid-column-start: 3;
										grid-column-end: auto;
									}
									
								

Span operator

We can stretch the grid element using the span operator in the properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end.

									
									.el1 {
										grid-row-start: span 2;
										grid-row-end: auto;
										grid-column-start: span 2;
										grid-column-end: auto;
									}
									
								

Using grid lines names

We also can use symbolic names of grid lines to placement grid elements in grid. We can replace numbers to names inside properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end.

									
									.grid {
										display: grid;
										grid-template-columns: 
											[start] 1fr [col2] 1fr [col3] 1fr [col-end];
										grid-template-rows: 
											[start] 1fr [row1] 1fr [row2] 1fr [row-end];
									}
									.el1 {
										grid-row-start: row1;
										grid-row-end: auto;
										grid-column-start: col2;
										grid-column-end: auto;
									}
									
								

Short record

We can also use a short notation for properties: grid-row, grid-column. We also can use names of gridlines here.

									
										.el1 {
											grid-row: 1 / 3;
											grid-column: 2 / 4;
										}
										.el1 {
											grid-row: start / row2;
											grid-column: col2 / col-end;
										}
									
								

Align grid items

We can use properties to align grid elements. For the container it is justify-items and align-items. For the element it is justify-self and align-self.

To align the grid element to the center of the cell, use the property margin: auto.