grid

通過grid網格布局能讓你的頁面布局像一個網格一樣,把對應的每一個組件分別放到你想放入的位置裏面。

html:

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
 
css

css:

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

效果：

grid-gap

定義元素與元素之間的距離

grid-column-gap/grid-row-gap

grid-column-gap：定義列與列之間的距離

grid-row-gap：定義行於行之間的距離

grid-column-start/end 與 gird-row-start/end

grid-column-start：規定改元素的列起始基線處於哪個網格線

grid-column-end：規定改元素的結束基線處於哪個網格線,這樣做可以將某個元素所占的空間給增大.

grid-row-start/end：上面的功能相同,只不過改變的是行而已.

grid-template-columns/rows

grid-template-columns：設置每列元素的寬度

grid-template-rows：設置每行元素的高度

grid網格布局