CSS Grid essay

Originally from Arien's blog https://www.w3cplus.com/css3/line-base-placement-layout.html

First define a grid

1. You can set the property of the parent container to display grid or inline-grid to define a grid. This allows you to use grid-template-columns the and grid-template-rows properties to create a grid.

. Wrapper{Display:Grid grid-template-columns< span class= "rule" >:  100px 10px 100px  10px 100px;< Span class= "value" >  Grid-template-rows: auto  10px auto;

Specify the column width, the spacing of the columns, Line height, line spacing, and so on.

2. The shorthand for gridlines, in fact, is grid-column grid-row start end combined with values to / separate them.

. A{Grid-column-start:1; grid-column-end: 2;  grid-row-start: 1;  grid-row-end: 2; }

can be shortened to

.a{  grid-column :  1 / 2;grid-row : 1  / 2;

3. There is a key in CSS grid layout, grid area grid-area .

Grid area He is a space composed of four grid lines.

The order of the grid lines that make up the grid area is row-start/column-start/row-end/column-end . Each grid line is also used / to separate.

. A{ grid-area: 1/ 1/ 2/ 2; }

CSS Grid essay