CSS 網格佈局模組
Header
選單
主選單
Right
頁尾
網格佈局
CSS 網格佈局模組提供了一個基於網格的佈局系統，包含行和列，使網頁設計更容易，而無需使用浮動和定位。
瀏覽器支援
網格屬性在所有現代瀏覽器中都受支援。
| 57.0 | 16.0 | 52.0 | 10 | 44 |
網格元素
網格佈局包含一個父元素，以及一個或多個子元素。
示例
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9
Display 屬性
當 HTML 元素的 display 屬性設定為 grid 或 inline-grid 時，它就成為一個網格容器。
網格容器的所有直接子元素都會自動成為網格項。
網格列
網格項的垂直線稱為列。
網格行
網格項的水平線稱為行。
網格間隙
每列/行之間的空間稱為間隙。
您可以使用以下屬性之一來調整間隙大小
column-gaprow-gapgap
示例
gap 屬性是 row-gap 和 column-gap 屬性的簡寫屬性
.grid-container {
display: grid;
gap: 50px 100px;
}
網格線
列之間的線稱為列線。
行之間的線稱為行線。
在網格容器中放置網格項時，請參考線編號
所有 CSS 網格屬性
| 屬性 | 描述 |
|---|---|
| column-gap | 指定列之間的間隙 |
| gap | row-gap 和 column-gap 屬性的簡寫屬性 |
| grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns 和 grid-auto-flow 屬性的簡寫屬性 |
| grid-area | 指定網格項的名稱，或者此屬性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 屬性的簡寫屬性 |
| grid-auto-columns | 指定預設列大小 |
| grid-auto-flow | 指定自動放置的項在網格中的插入方式 |
| grid-auto-rows | 指定預設行大小 |
| grid-column | grid-column-start 和 grid-column-end 屬性的簡寫屬性 |
| grid-column-end | 指定網格項的結束位置 |
| grid-column-gap | 指定列之間的間隙大小 |
| grid-column-start | 指定網格項的開始位置 |
| grid-gap | grid-row-gap 和 grid-column-gap 屬性的簡寫屬性 |
| grid-row | grid-row-start 和 grid-row-end 屬性的簡寫屬性 |
| grid-row-end | 指定網格項的結束位置 |
| grid-row-gap | 指定行之間的間隙大小 |
| grid-row-start | 指定網格項的開始位置 |
| grid-template | grid-template-rows、grid-template-columns 和 grid-areas 屬性的簡寫屬性 |
| grid-template-areas | 使用命名網格項指定如何顯示列和行 |
| grid-template-columns | 指定列的大小，以及網格佈局中的列數 |
| grid-template-rows | 指定網格佈局中行的大小 |
| row-gap | 指定網格行之間的間隙 |
