Grid layouts, called elastic layouts, are new in CSS3

Create grid box

display: grid;
Copy the code

Grid-template-columns attribute, grid-template-rows attribute

The grid-template-columns property setting defines the column width of each column, and the grid-template-rows property setting defines the row height of each row

1[default] grid-template-columns: 33.3% 33.3% 33.3%; /*3 columns, each 33.3% wide */
grid-template-rows: 33.3% 33.3% 33.3%; /*3 rows, each with a height of 33.3%*/
2. [repeat()] grid-template-columns: repeat(3.33.33%); /* more concise */
grid-template-rows: repeat(3.33.33%);
3. 【 withauto-fill keyword: grid-template-columns: repeat(auto-fill, 100px); /* Fits the cell size fixed, but the container size is not determined */
4Grid-template -columns: 1fr 1fr; /* FR ratio 1:2*/
Copy the code

Grid-row-gap attribute, grid-column-gap attribute

Grid-row-gap sets the row spacing and grid-column-gap sets the column spacing

grid-row-gap: 20px; /* Set row spacing to 20px*/
grid-column-gap: 20px;
Copy the code

The grid-auto-flow attribute defines the order of the elements

grid-auto-flow: row; /* * * */
Copy the code

grid-auto-flow: column; /* first column */
Copy the code

Justify -items property, align-items property

The context-items property sets the horizontal position of the cell content (left, middle, and right), and the align-items property sets the vertical position of the cell content (top, middle, and bottom)

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch; End: align the end edge of the cell center: center the inside of the cell and stretch to cover the entire width of the cell (default value)Copy the code

(the justify – items: start)

Context-content property, align-content property

The justify-content property is the horizontal (left – middle – right) position of the entire content area in the container, and the align-content property is the vertical (top – middle – bottom) position of the entire content area

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
Copy the code

(the justify – content: center)