Summary of usage of grid layout in CSS (with code)

This article introduces you to the content of the CSS in the layout of the use of the summary (with code), there is a certain reference value, the need for a friend can refer to, I hope you have some help

1. Basic usage

There are 5 core properties of the Grid layout:

. parent {    Display:grid;    grid-template-colomns:30px 1fr;    Grid-template-rows:repeat (3, 30px) 1fr;    & >. Child {        grid-column:1/3;        grid-row:1;}    }

In general, the Grid layout is: The parent element first defines itself with several rows and columns. Then, the child element defines itself in the first few rows (which can span multiple rows or columns).

Where the display attribute should be familiar to everyone? No more talking here.

The repeat function means that the 1 CSS values are repeated n times.

gird-columnCan be split into grid-column-start and grid-column-end two properties.

gird-rowCan be split into grid-row-start and grid-row-end two properties.

2. grid-template-areas andgrid-area

grid-template-areasThis property is actually a bit of a pictographic meaning.

. parent {    Display:grid;    grid-template-colomns:100px 1fr;    GRID-TEMPLATE-ROWS:1FR 50px;    Grid-template-areas:        "nav    content"        "footer footer";    & >. item1 {      grid-area:nav;    }    & >. item2 {      grid-area:content;    }    & >. item3 {      grid-area:footer;    }}

Above we divide the parent element into 4 cells. Then the upper left of the lattice named Nav, the upper right of the lattice named content, the bottom of the lattice named footer.

Finally, we just need to specify which area we belong to in the child element.

This is a good thing: we no longer have to write boring and difficult to understand grid-column grid-row , can give their own region a semantic name

3. row-gap , colomns-gap ,grid-gap

Like Flex, Grid layouts also support line spacing and column spacing.

grid-gapIs row-gap colomns-gap the merger of the and.

grid-gapcan also be abbreviated as gap .

Note: colomns-gap The default value is normal , which indicates that the column spacing is1em

4. grid-auto-columns andgrid-auto-rows

If you do not know in advance that your grid has several rows (there are several columns), these two properties can help you. As the literal meaning, this property represents the height (width) of the grid row (column) since the growth

This property is especially useful when you are rendering a list of indefinite lengths.

For example:

. parent {    Display:grid;    GRID-TEMPLATE-COLOMNS:1FR;    grid-auto-rows:100px;    & >. Child {        grid-column:1;    }}

Related articles recommended:

Introduction to Flexible box layouts (with code)

How CSS implements responsive layout