CSS Grid 網格布局

CSS網格布局用于将頁面分割成數個主要區域，或者用來定義元件内部元素間大小、位置和圖層之間的關系。 – MDN

參考

• CSS Grid布局這樣玩
• MDN

1. 建立 Grid 容器

通過

display: grid

來聲明一個容器，這個标簽内的子标簽則自動成為 Grid Item

2. grid-template-columns 定義網格列

通過

grid-template-columns: 1fr 1fr 1fr;

定義網格列，每一個 1fr 值代表一列

fr

是一個機關效果與 flex 的 flex-grow 一樣，都是定義數值占比的，也可以使用其他機關：

• px 固定數值
• fr 剩餘空間占比
• minmax(300px, 1fr) 兩個數值中取最大的展示
• fit-content(300px) 适應内容寬度，但是不能大于 300px
• repeat(2, 1fr) 重複幾次

3. grid-template-rows 定義網格行

使用與 grid-template-columns 一緻

3. 網格間隙

通過

grid-gap: row-gap col-gap

設定網格間距

• row-gap 第一個值是行間距
• col-gap 第二個值是列間距

4. Grid Item 位置可單獨定義

通過給每一個 Grid Item 設定 grid-row grid-column 來控制 Grid Item 在 Grid 容器中位置

網格線：grid-template-columns 與 grid-template-rows 兩個屬性會建立網格線，網格線之間就是 Grid Item，以下是網格線的示意圖

/* 
  假定這個容器有10個字元素，切按如下方式定義 4 列，那麼它應該有3行 
  網格線的數量則是：列網格=4列+1；行網格=3行+1
*/
.container{
  grid-template-columns: minmax(300px, 1fr) fit-content(300px) 1fr 1fr;
  /* .item1, .item2, ... .item10 */
}
           

.item1 {
  grid-row: 2 / 3; // 将目前item 的行移動到 網格線 2 到 網格線 3 之間
  grid-column: 3 / 4; // 将目前 item 的列移動到 網格線 3 到 網格線 4 之間
}

.item2{
  grid-row: 1 / span 2; // 将目前item 的行移動到網格線 1 起始并且行占據 2 個單元格
  grid-column: 2 / span 3; // 将目前 item 的列移動到網格線 2 起始并且占據 3 個單元格
}
           

移動或者占據單元格後，其他的子元素則按照預設規則排列