css grid佈局demo詳解
阿新 • • 發佈：2019-02-07
示例1：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .grid-1</style></head><body> <section class="grid-1"> <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 class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> </section></body></html>
grid-tmplate-rows :定義表格 子元素 每一列的高度，說的專業點叫做，宣告網格軌道的 行。（設定為 auto 的話 根據內容設定高度）
grid-tmplate-columns: 定義網格 子元素 每一行的 高度，說的專業店 叫做 宣告 網格軌道 的列。
grid-row 和 grid-column 設定 每個子元素 在網格中的位置，就是指定 網格 的行和列。