Grid佈局快速入門
常用Grid佈局屬性介紹
下面從一個簡單Grid佈局例子說起。
CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。
下面是一個 wrapper 元素，內部包含6個 items ：
<div class="wrapper">
<div class="item div1">1</div>
<div class="item div2">2</div>
<div class="item div3">3</div>
<div class="item div4">4</div>
<div class="item div5">5</div>
<div class="item div6">6</div>
</div>要把 wrapper 元素變成一個 grid(網格)，只要簡單地把其 display 屬性設定為 grid 即可
.wrapper {
display: grid;
}
Columns(列) 和 rows(行)
為了使其成為二維的網格容器，我們需要定義列和行。讓我們建立3列和2行。我們將使用grid-template-row和grid-template-column屬性。
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}grid-template-columns的3個值表示三列，相應的數值表示列寬即都為100px。
grid-template-rows的2個值表示兩行，相應的數值表示行高即都為50px
得到的結果如下：
我們可以變化一下行高跟列寬的值看下效果，程式碼：
.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 50px;
}效果圖：