Grid區域性，當該容器的元素，需要成行成列的排列時，適合使用Grid

有兩種設定：

.grid-container {
  display: grid;
}

.grid-container {
  display: inline-grid;
}

 gap = row-gap+column-gap

一、在外部容器上面，定義行和列

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

 .grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

 但所有列的寬度之和不足整個Grid，可以決定每一列的位置

.grid-container {
display: grid;
justify-content: start;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

 所有行的高度不足整個Grid的高度，可以排列行的位置

.grid-container {
display: grid;
height: 400px;
align-content: space-between;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

 二、在內部元素上面，定義位置

grid-column: start column / end column +1

grid-row: start row / end row + 1

注意，可以設定span，推斷出終止的行號和列號

grid-column: start column /span count

grid-row: start row / span count

簡略寫法：

grid-area: start column / end column / start row / end row

還有一種，結合命名，使用

.item1 {
grid-area: myArea;
}

.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}