網格布局grid
提供了帶有行和列的基于網格的布局系統，無需使用浮動和定位。
當 HTML 元素的 display 屬性設置為 grid 或 inline-grid 時，它就會成為網格容器。
更多布局模式可以參考之前的博客：
??????CSS—flex布局、過渡transition屬性、2D轉換transform屬性、3D轉換transform屬性
有關display屬性之前也有寫過：
CSS—顯示模式display、float浮動，清除浮動的6種方式、定位position、元素溢出overflow
當把網格項目放在網格容器中時，引用行號：
把網格項目放在列線 1，并在列線 3 結束它：
.item1 {grid-column-start: 1;grid-column-end: 3;
}| 屬性 | 描述 |
|---|---|
grid-column | 定義將項目放置在哪一列上。是 grid-column-start和grid-column-end縮寫</br>例如：grid-column: 2/3;第2列開始第3列結束。 |
grid-row | 定義將項目放置在哪一行上，寫法與grid-column類似 |
grid-area | grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 屬性的簡寫。也可用于為項目命名。 |
grid-column-gap | 調整列間隙 |
grid-row-gap | 調整行間隙 |
grid-gap | 調整間隙 |
grid-template-columns | 定義網格布局中的列數，并可定義每列的寬度。以空格分隔的列表，其中每個值定義相應列的長度。 |
grid-template-rows | 定義每列的高度 |
justify-content | 在容器內對齊整個網格。網格的總寬度必須小于容器的寬度， justify-content 屬性才能生效。 |
align-content | 垂直對齊容器內的整個網格。網格的總高度必須小于容器的高度， align-content 屬性才能生效。 |
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {grid-area: myArea;
}.grid-container {display: grid;grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';grid-gap: 10px;background-color: #2196F3;padding: 10px;
}.grid-container > div {background-color: rgba(255, 255, 255, 0.8);text-align: center;padding: 20px 0;font-size: 30px;
}
</style>
</head>
<body><p>Item1 的名為 "myArea"，會占據兩列兩行</p><div class="grid-container"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div> <div class="item4">4</div><div class="item5">5</div><div class="item6">6</div>
</div></body>
</html>【記錄學習過程的筆記，歡迎大家一起討論，會持續更新】?
