grid grid layout - layout dice

First, the basic concept

style	meaning
grid-area	Define Name
grid-auto-columns	Define the number of columns
grid-auto-flow	Cell defined flow direction (imaginary like water)
grid-auto-rows	Define the number of rows
grid-column	The first columns / span merge columns
grid-column-start	The first columns
grid-column-end	Span columns
column-gap	Column spacing
grid-gap	Line spacing / pitch of column
grid-row	The first few lines / row span
row-gap	Line spacing
grid-row-start	The first few lines
grid-row-end	span
grid-template	Defines a grid row / column
grid-template-columns	Defines a grid columns
grid-template-rows	Defines a grid line number
grid-template-areas	Defined area grid

   
 
  
   
 

<div class="grid grid1">
    <div class="item" style="grid-area:a"></div>
</div>

 .grid {
            grid-gap: 10px;
            display: grid;
            height: 100px;
            width: 100px;
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            margin-top: 10px;
        }
.grid1 {
            grid-template-areas:
                ". . ."
                ". a ."
                ". . .";
        }

 

 

 

 

 

.grid2 {
            grid-template-areas:
                ". a ."
                ". . ."
                ". b .";
        }

<div class="grid grid2">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
    </div>

 

.grid3 {
            grid-template-areas:
                "a . ."
                ". b ."
                ". . c";
        }

<div class="grid grid3">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
        <div class="item" style="grid-area:c"></div>
    </div>

 

 

 .grid4 {
            grid-template-areas:
                "a . b"
                ". . ."
                "c . d";
        }

<div class="grid grid4">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
        <div class="item" style="grid-area:c"></div>
        <div class="item" style="grid-area:d"></div>
    </div>

 

 

  

<div class="grid grid5">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
        <div class="item" style="grid-area:c"></div>
        <div class="item" style="grid-area:d"></div>
        <div class="item" style="grid-area:e"></div>
    </div>

 

.grid5 {
            grid-template-areas:
                "a . b"
                ". c ."
                "d . e";
        }

 

.grid6 {
            grid-template: repeat(3, calc((100px - 20px) / 3)) / repeat(2, calc((100px - 20px) / 3));
            justify-content: space-between;
        }

 

<div class="grid grid6">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>