1-8. Grid 網格佈局編排法
網格佈局的概念
以下範例已設定好的部份
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<style>
.container { background-color: #ffc0ee; padding: 10px; }
.item { background-color: #a2a2f0; }
</style>
1. 網格佈局的指定顯示模式 ( display : grid | inline-grid )
1
2
3
4
5
6
7
8
9
2. column 欄的控制
1
2
3
4
5
6
7
8
9
3. 間距的控制
1
2
3
4
5
6
7
8
9
4. column 方向的 line 線控制
1
2
3
4
5
6
7
8
9
5. row 方向的 line 線控制
1
2
3
4
5
6
7
8
6. row 列的控制 (一般列的高度都是由內容決定, 但也可以由grid控制)
1
2
3
4
5
6
7
8
9
7. 水平對齊 justify-content 的控制
1
2
3
4
5
6
8. 垂直對齊 align-content 的控制
1
2
3
4
5
6
9. 控制 item 的 column
1
2
3
4
5
6
7
8
9
10. 控制 item 的 row
1
2
3
4
5
6
7
8
9
11. 控制 item 的 area 區域
1
2
3
4
5
6
7
8
9
10
綜合應用練習
GRID GARDEN
