Grid

Is a value in the display property of the CSS. Columns and rows can be defined on a grid using the grid-template-rows and grid-template-columns properties. A grid defined using these properties is called an explicit gridCopy the code

The Grid layout

Display :grid; Add to the parent elementCopy the code

Set the rows and columns

.container{grid-template-columns:40px 50px auto 50px 40px; grid-template-row:25% 100px auto; }Copy the code

Give each line a name and make the call

.containter{grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4] 50px [five] 40px [end]; grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto[last-line]; }Copy the code

Set the item range (Column row,row column)

.item-a{grid-column-start:2;
        grid-column-end:five;
        grid-row-start:row1-start;
        grid-row-end:3;
Copy the code

Use fr abbreviation,(Free space)

.container{grid-template-columns:1fr 1fr 1fr 1fr; } .container{grid-template-columns:1fr 50px 1fr 1fr; } grid-grp:10px; A blank of 10px is used for average layoutCopy the code

The grid – the template – areas partition

.item-a{grid-area:header; } .item-b{grid-area:main; } .item-c{grid-area:sidebar; } .item-d{grid-area:footer; } .container{display:grid; grid-template-columns:50px 50px 50px 50px; grid-template-rows:auto; grid-template-rows:" header header header header "
    " main main _ sidebar"(_ is space)" footer footer footer fotter " }
Copy the code

GRP gap

.container{grid-template-columns:100px 50px 100px; grid-template-rows:80px auto 80px; grid-column-grp:10px; The gap between the lines is 10px grid-row-grp:10px; The space between the columns is 10pxCopy the code

Practice: Little frog game

Grid: Grid practice code