Grid layout grid

1. Start Grid Layout

div {
  display: grid;
}

After the start, the child element float, display: inline-block, display: table-cell, vertical-alignand column-*other settings will be lost

2. ranks highly

div { 
    the display : Grid ; 
    Grid-Template-Columns : 50px 100px by 150px ; 
    Grid-Template-rows : by 150px 100px 50px ;
     / * * * equivalent to 50px 50px 50px * / 
    Grid-Template-Columns : REPEAT (. 3, 50px) ;
     / * * the parent container filled with sub-elements as possible 100px * * / 
    Grid-Template-columns : REPEAT (Auto-fill, 100px) ;
     / * * new units fr, the first column represents the width of 150 pixels width of the second column is the third column of half * * / 
    Grid-Template-columns : by 150px 1FR 2FR ;
     / *The third column indicates MINMAX * width * 1FR ~ 100px * / 
    Grid-Template-Columns : 1FR 1FR MINMAX (100px, 1FR) ;
     / * * * indicates a length determined by the browser themselves * / 
    Grid-Template-Columns : 100px Auto 100px ;
     / * * a name to the grid lines * * / 
    grid-Template-Columns : [C1] 100px [C2] 100px [C3] Auto [C4] ; 
}

3. The grid spacing

div {
    grid-row-gap: 10px;
    grid-column-gap: 15px;
    grid-gap: <grid-row-gap> <grid-column-gap>;
}

4. Select the layout area

<div>
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

<style>
div {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    grid-template-columns: repeat(3, 50px);
    grid-template-areas: ". a a" "b a a" ". c c";
    grid-gap: 10px;
}
div div {
    border: 1px solid #000;
}
.item-1 {
    grid-area: a;
}
.item-2 {
    grid-area: b;
}
.item-3 {
    grid-area: c;
}
</style>

Renderings:

Guess you like