原文出自Arien的博客 https://www.w3cplus.com/css3/line-base-placement-layout.html

首先定義一個網格

1.可以給父容器的display屬性設置為grid或者inline-grid來定義一個網格。這樣你就可以使用grid-template-columns和grid-template-rows屬性來創建一個網格。

.wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; }

指定了列寬、列間距，行高和行間距等。

2.網格線的簡寫方式，其實就是grid-column和grid-row的start與end值合並在一起，兩者之間用/來分隔。

.a{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }

可簡寫為

.a{ grid-column: 1 / 2; grid-row: 1 / 2; }

3.在CSS Grid Layout中有一個關鍵東東，網格區域grid-area。

網格區域他是由四條網格線組成的一個空間。

組成網格區域的網格線順序是row-start/column-start/row-end/column-end

.a{ grid-area: 1 / 1 / 2 / 2; }

css grid 隨筆