CSS Grid layout complete tutorial

Jane said

CSS Grid is a set of two-dimensional page layout system, its appearance will completely overturn the traditional way of page layout. Traditional CSS page layouts have never been ideal. Table layouts, floating, positioning, and inline blocks are all hacks in nature and leave out some important features (such as vertical center). Flexbox is a partial solution to these problems, but Flex layouts are designed to solve simple one-dimensional layouts that are suitable for local layouts on pages. Grid is a natural solution for complex two-dimensional layout, suitable for the overall layout of the page. In practice, Grid and Flexbox are not only compatible, but also work well together. As WEB programmers, we’ve all worked hard on page layout issues and will continue to explore new solutions. The Grid is the first CSS module specifically designed for layout issues, and there is reason to be hopeful.

This article consists of 18 sections, 62 examples, and takes more than 20 minutes to read fully.

For the best reading experience, visit a tutorial in the following format:

Learn CSS Grid

1 Grid container

Setting the display attribute to grid or inline-grid creates a grid container, and all the direct children of the container automatically become grid items.

1.1 case 1

grid { display: grid; }Copy the code

Grid items are arranged in rows, and grid items occupy the entire width of the container.

The demo

1.1 case 2

grid { display: inline-grid; }Copy the code

Grid items are arranged in rows, and the width of grid items is determined by its own width.

The demo

2 Display grid

The grid-template-rows and grid-template-columns properties are used to display the definition grid, which defines row and column tracks, respectively.

2.1 example 3

grid  {
    display: grid;
    grid-template-rows: 50px 100px; }Copy the code

The grid-template-rows property is used to define the size of the row, the track size. The track size can be any non-negative length value (px, %, em, etc.)

The row height for Grid project 1 is 50px and the row height for grid Project 2 is 100px.

Because only two row heights are defined, the row heights of grid items 3 and 4 depend on their own heights.

The demo

2.2 example 4

grid  {
    display: grid;
    grid-template-columns: 90px 50px 120px; }Copy the code

Similar to the row definition, the grid-template-columns attribute is used to define the size of the column.

Because there are only three columns in the definition, items 4, 5, and 6 are placed in a new row; And because they are on rails 1, 2, and 3, their widths are equal to the widths of rails 1, 2, and 3 in the definition.

The width of column 1, 2, and 3 of the grid project is 90px, 50px, and 120px, respectively.

The demo

2.3 case 5

grid  {
    display: grid;
    grid-template-columns: 1fr 1fr 2Fr. }Copy the code

The unit FR is used to represent the track size quota, which represents the allocation of available space in proportion to the quota.

In this example, item 1 is 1/4 of the width, item 2 is 1/4 of the width, and Item 3 is 1/2 of the width.

The demo

2.4 case 6

grid  {
    display: grid;
    grid-template-columns: 3rem 25% 1fr 2Fr. }Copy the code

When the unit FR is mixed with other units of length, the calculation of fr is based on the space left after the other units are allocated.

In this case, 1FR = (container width -3rem – 25% of the container width) / 3

The demo

3 set the minimum and maximum size of track

The function minmax() is used to define the minimum/maximum orbital boundary value.

3.1 7

grid { display: grid; grid-template-rows: minmax(100px, auto); grid-template-columns: minmax(auto, 50%) 1fr 3em; }Copy the code

The function minmax() takes two arguments: the first argument represents the minimum track size and the second argument represents the maximum track size. The length value can be auto, indicating that the track size can be extended or contracted depending on the content size.

In this example, the minimum height of the first line is set to 100px, but the maximum height is set to Auto, indicating that the line height can be extended by more than 100px depending on the content.

In this case, the maximum width of the first column is set to 50%, which means that it cannot be more than 50% of the entire container width.

The demo

4 Repeated grid tracks

The function repeat() is used to define repeating grid tracks, especially if there are multiple identical items.

4.1 8

grid { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(3, 1fr); }Copy the code

The function repeat() takes two parameters: the first parameter indicates the number of repetitions, and the second parameter indicates the track size.

The demo

4.2 9

grid { display: grid; grid-template-columns: 30px repeat(3, 1fr) 30px; }Copy the code

The function repeat() can be used in the list of track definitions.

In this case, columns 1 and 5 are 30px wide. The function repeat() creates the middle three columns, each 1fr wide.

The demo

Define mesh clearance

The grid-column-gap and grid-row-gap attributes are used to define grid gaps.

Grid gaps are created only between rows and columns, with no gaps between items and boundaries.

5.1 case 10

grid { display: grid; grid-row-gap: 20px; grid-column-gap: 5rem; }Copy the code

The gap size can be any non-negative length value (px, %, em, etc.).

The demo

5.2 cases of 11

grid { display: grid; grid-gap: 100px 1em; }Copy the code

The grid-gap attribute is a short form of grid-row-gap and grid-column-gap.

The first value represents the row gap and the second value represents the column gap.

The demo

5.3 cases of 12

grid { display: grid; grid-gap: 2rem; }Copy the code

If there is only one value, it represents both the row gap and the column gap.

The demo

Use grid line numbering to locate items

Grid lines are essentially used to indicate the beginning and end of a grid track.

Each grid line is numbered starting with 1 and moving forward in a step of 1, including rows and columns and two groups of grid lines.

6.1 cases of 13

.item1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}
Copy the code

This is a grid with 3 rows and 2 columns, meaning there are 4 grid lines on the row and 3 grid lines on the column. Item 1 is positioned in row 2, column 2 by grid line numbering.

In this example, if the item spans only one row and one column, grid-row-end and grid-column-end can be omitted.

The demo

6.2 cases of 14

.item1 {
    grid-row:    2;
    grid-column: 3 / 4;
}
Copy the code

The grid-row property is short for grid-row-start and grid-row-end.

The grid-column attribute is a short form of grid-column-start and grid-column-end.

If only one value is specified, it represents grid-row/column-start.

If both values are specified, the first value represents grid-row/column-start and the second value represents grid-row/column-end. And you must separate the two values with a slash (/).

The demo

6.3 case 15

.item1 {
    grid-area: 2 / 2 / 3 / 3;
}
Copy the code

The grid-area property is shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

If all four values are specified, the first represents grid-row-start, the second grid-column-start, the third grid-row-end, and the fourth grid-column-end.

The demo

7 Grid projects across the ranks

Grid projects take up one row and one column by default, but you can use the attributes that locate the project in the previous section to specify that the project spans more than one row or column.

7.1 cases of 16

.item1 {
    grid-column-start: 1;
    grid-column-end:   4;
}
Copy the code

Grid-column-start and grid-column-end sets the grid item across multiple columns.

The demo

7.2 cases of 17

.item1 {
    grid-row-start: 1;
    grid-row-end:   4;
}
Copy the code

The grid project spans multiple rows with grid-row-start and grid-row-end values.

The demo

7.3 cases of 18

.item1 {
    grid-row:    2 / 5;
    grid-column: 2 / 4;
}
Copy the code

The shorthand properties grid-row and grid-column can be used either to locate an item or to span multiple columns and columns.

The demo

7.4 the 19th

.item1 {
    grid-row:    2 / span 3;
    grid-column: span 2;
}
Copy the code

The span keyword is used to specify the number of rows or columns to span.

The demo

8 Grid line naming

When you define a grid with the grid-template-rows and grid-template-columns attributes, you can also define the name of the grid line. Grid line names can be used to locate grid items.

8.1 cases of 20

grid { display: grid; grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end]; grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]; }Copy the code

Define the grid with the grid-template-rows and grid-template-columns attributes, along with the grid line names.

To avoid confusion, grid line names should avoid the use of specification keywords (span, etc.).

The name of a grid line is defined by enclosing it in brackets ([name-of-line]) and corresponding to a grid track.

8.2 the 21st

grid { display: grid; grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end]; }Copy the code

You can define multiple names for the same gridline by separating them with Spaces inside brackets.

Each grid line name can be referenced to locate the grid item.

9 Locate items with grid line names

Using named grid lines, it is easy to locate projects.

9.1 cases of 22

.item1 {
    grid-row-start:    row-2-start;
    grid-row-end:      row-end;
    grid-column-start: col-2-start;
    grid-column-end:   col-end;
}
Copy the code

Grid line names are referenced without brackets.

The demo

9.2 cases of 23

.item1 {
    grid-row:    row-2-start / row-end;
    grid-column: col-2-start / col-end;
}
Copy the code

The shorthand properties grid-row and grid-column can also use grid-line names to locate items.

The demo

Name and locate items with grid lines of the same name

The function repeat() can define a grid line of the same name. This saves time naming each grid.

10.1 cases of 24

grid {
    display: grid;
    grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
    grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
}
Copy the code

The function repeat() can be used to define mesh lines of the same name. So that multiple grid lines have the same name.

Grid lines of the same name will be assigned a location number as their unique identification.

10.2 cases of 25

.item1 {
    grid-row:    row-start 2 / row-end 3;
   grid-column: col-start / col-start 3;
}
Copy the code

When locating an item with a grid line of the same name, note that there is a space between the grid line name and number.

In this case, the row positioning of item 1 begins on the second grid line named row-start and ends on the third grid line named row-end. Column positioning starts with the first grid line named col-start and ends with the third grid line named col-start.

The demo

Name and position projects with grid areas

As with grid line naming, you can name grid areas with the attribute grid-template-areas. Grid region names can be used to locate grid items.

11.1 cases of 26

grid {
    display: grid;
    grid-template-areas:   "header header"
                        "content sidebar"
                        "footer footer";
    grid-template-rows:    150px 1fr 100px;
    grid-template-columns: 1fr 200px;
}
Copy the code

A list of zone names is enclosed in single or double quotation marks, each separated by a space.

Each set of names defines a row, and each name defines a column.

11.2 cases of 27

header {
    grid-row-start: header;
    grid-row-end: header;
    grid-column-start: header;
    grid-column-end: header;
}
Copy the code

Grid region names can be used in the values of the grid-row-start, grid-row-end, grid-column-start, and grid-column-end attributes to locate items.

11.3 cases of 28

footer {
    grid-row: footer;
    grid-column: footer;
}
Copy the code

Grid region names can also be used in the values of the shorthand grid-row and grid-column attributes.

11.4 cases of 29

aside {
    grid-area: sidebar;
}
Copy the code

The grid region name can also be used in the value of the shorthand grid-area attribute.

The demo

Implicit grid

Implicit grids are used to locate items outside of explicit grids. Sometimes there is not enough space in the display grid, or an implicit grid is used to locate items outside the display grid. These items can then be placed in an implicit grid.

Implicit grids can be defined by the properties grid-auto-rows, grid-auto-columns, and grid-auto-flow.

12.1 cases of 30

grid {
    display : grid;
    grid-template-rows:    70px;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:        140px;
}
Copy the code

In this case, there is only one orbit, so items 1 and 2 are 70px high.

The second track has an implicit grid automatically created and allocated space for items 3 and 4. The grid-auto-rows property defines the row track size of the implicit grid, i.e. the height of items 3 and 4 is 140px.

The demo

12.2 cases of 31

grid {
    display : grid;
    grid-auto-flow: row;
}
Copy the code

The default grid layout orientation is row.

12.3 cases of 32

grid {
    display : grid;
    grid-auto-flow: column;
}
Copy the code

The layout orientation of a grid can be defined as the orientation of a column.

12.4 cases of 33

grid {
    display : grid;
    grid-template-columns: 30px 60px;
    grid-auto-flow:        column;
    grid-auto-columns:     1fr;
}
Copy the code

In this case, we only define the two column tracks at 30px and 60px.

Automatically create additional columns in the implicit grid and allocate space to projects 3, 4, and 5; The allocated space size is defined by the property grid-auto-columns.

The demo

Implicitly named grid regions

Grid line names can be specified arbitrarily, but assigning names ending with -start and -end has the added benefit of implicitly creating a named grid region that can be used for project positioning.

13.1 cases of 34

grid {
    display : grid;
    grid-template-rows:    [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
    grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end];
}
Copy the code

In this case, the rows and columns are named inner-start and inner-end grid lines, which implicitly assign names to the grid regions (inner).

item1 {
    grid-area: inner;
}
Copy the code

This allows us to locate items directly using the grid region name instead of using grid lines to locate items.

The demo

Implicitly named grid lines

Implicitly named grid lines and implicitly named grid regions work in reverse.

14.1 cases of 35

grid {
    display : grid;
    grid-template-areas:   "header header"
                        "content sidebar"
                        "footer footer";
    grid-template-rows:    80px 1fr 40px;
    grid-template-columns: 1fr 200px;
}
Copy the code

The grid area is implicitly named with the grid line name. These grid lines are named based on the region name with the suffix -start or -end.

14.2 cases of 36

item1 {
    grid-row-start:    header-start;
    grid-row-end:      content-start;
    grid-column-start: footer-start;
    grid-column-end:   sidebar-end;
}
Copy the code

In this case, the header is located by an implicit gridline name.

The demo

15 Cascading grid projects

Multiple items can be stacked with item location, and the z-index attribute can change the level of the stacked items.

15.1 cases of 37

.item-1..item-2 {
  grid-row-start:  1;
  grid-column-end: span 2;
}
.item-1 { grid-column-start: 1; z-index: 1; }
.item-2 { grid-column-start: 2 }
Copy the code

In this example, the positioning of items 1 and 2 rows starts on the grid line 1 and spans two columns.

Both items are located with grid line numbers. Item 1 starts on column 1 grid line, and item 2 starts on column 2 grid line, causing the two items to overlap in the middle column of the first row.

By default, project 2 is layered on top of project 1; However, setting z-index: 1 to item 1 causes item 1 to cascade on top of item 2.

The demo

15.2 cases of 38

.overlay {
    grid-row-start:    header-start;
    grid-row-end:      content-end;
    grid-column-start: content-start;
    grid-column-end:   sidebar-start;
    z-index: 1;
}
Copy the code

In this example, an overlay is located on top of a grid project using the implicit grid line name in the grid-template-Areas definition.

The demo

Alignment of grid items

CSS’s box model alignment module complements the CSS grid, and grid items can be aligned in a variety of ways along the axis of rows or columns.

The properties sequence-items and sequence-self align items with reference to the row axis, and the properties align-items and align-self align items with reference to the column axis.

The properties context-items and align-items are grid container properties and support the following values:

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

16.1 39

.grid {
    grid-template-rows: 80px 80px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "content content"
                       "content content";
}
.item { grid-area: content }
.grid {
    justify-items: start
}
Copy the code

Align at the beginning of the axis of the row.

The demo

16.2 cases of 40

grid {
    justify-items: center;
}
Copy the code

Align at the midpoint on the axis of the row.

The demo

16.3 cases of 41

grid {
    justify-items: end;
}
Copy the code

Align at the end of the row’s axis.

The demo

16.4 42

grid {
    justify-items: stretch;
}
Copy the code

It extends along the axis of the row and fills the entire area. “Stretch” is the default value.

The demo

16.5 cases of 43

grid {
    align-items: start;
}
Copy the code

Align at the beginning of the axis of the column.

The demo

16.6 cases of 44

grid {
    align-items: center;
}
Copy the code

Align at the midpoint of the column axis.

The demo

16.7 45

grid {
    align-items: end;
}
Copy the code

Align at the axis endpoint of the column.

The demo

16.8 cases of 46

grid  {
    align-items: stretch;
}
Copy the code

Extend along the axis of the column and fill the entire area.

The demo

16.9 cases of 47

grid {
    justify-items: center;
    align-items:   center;
}
Copy the code

Items are positioned halfway between the row and column axes.

The demo

Alignment of grid items 2

Projects can define their own alignment using the align-self and context-self attributes and support the following attribute values:

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

17.1 cases of 48

.item1 { justify-self: start }
.item2 { justify-self: center }
.item3 { justify-self: end }
Copy the code

Attribute context-self defines the alignment along the axis of the row.

The demo

17.2 cases of 49

.item1 { align-self: start }
.item2 { align-self: center }
.item3 { align-self: end }
Copy the code

The align-self attribute defines the alignment on the axis of the column.

The demo

17.3 cases of 50

.item1 {
    justify-self: center
    align-self:   center
}
Copy the code

Item 1 is positioned halfway between the axis of the row and the axis of the column.

The demo

18 Grid track alignment

In a grid container, there are many ways to align the grid track along the axis.

The align-content attribute is used to define the alignment of grid tracks along the axis of a row, and the context-Content attribute is used to define the alignment of grid tracks along the axis of a column. The following attributes are supported:

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• last baseline

18.1 cases of 51

.grid {
    width: 100%;
    height: 300px;
    grid-template-columns: repeat(4, 45px);
    grid-template-rows: repeat(4, 45px);
    grid-gap: 0.5 em;
    justify-content: start;
}
Copy the code

The rails of the column are aligned at the beginning of the axis of the row. Start is the default value.

The demo

18.2 cases of 52

.grid {
    justify-content: end;
}
Copy the code

The rails of the column are aligned at the end of the axis of the row.

The demo

18.3 cases of 53

.grid {
    justify-content: center;
}
Copy the code

The rails of the column are aligned in the middle of the axis of the row.

The demo

18.4 cases with 54

.grid {
    justify-content: space-around;
}
Copy the code

Divide the extra space equally on both sides of each column.

The demo

18.5 cases of 55

.grid {
    justify-content: space-between;
}
Copy the code

Allocate additional space equally between columns.

The demo

18.6 cases of 56

.grid {
    justify-content: space-evenly;
}
Copy the code

Allocate additional space equally between columns and between columns and boundaries.

The demo

18.7 cases of 57

.grid {
    align-content: start;
}
Copy the code

The rows’ orbits are aligned at the start of the column’s axis, and the attribute start is the default.

The demo

18.8 58

.grid {
    align-content: end;
}
Copy the code

The orbits of the rows are aligned at the end of the axis of the column.

The demo

18.9 cases 59

.grid {
    align-content: center;
}
Copy the code

The orbits of the rows are aligned at the midpoint of the axis of the column.

The demo

18.10 cases of 60

.grid {
    align-content: space-around;
}
Copy the code

Divide the extra space equally on both sides of each row.

The demo

18.11 61

.grid {
    align-content: space-between;
}
Copy the code

Allocate extra space equally between rows.

The demo

18.12 62

.grid {
    align-content: space-evenly;
}
Copy the code

Allocate extra space equally between rows and between rows and boundaries.

The demo

conclusion

This tutorial is a relatively comprehensive introduction to grids, but it is not a complete technical document. For a more comprehensive overview, visit the Mozilla Developer Network and the W3C grid documentation.

Due to the limited capacity, the translation is inevitable mistakes more, but also please understand!

Many thanks to Jonathan Suh for his excellent work in typography, sample production, and text editing.

For the best reading experience, please visit the following layout tutorial:

Learn CSS Grid

Original English