Grid

塊級容器

1、display：grid；

2、使用 grid-template-columns 規則可劃分列數，使用 grid-template-rows 劃分行數。

• 固定寬度（具體畫素）當容器寬度過大時將漏白。
• 百分比自動適就容器。
• 使用 repeat 統一設定值，第一個引數為重複數量，第二個引數是重複值。
• 自動填充,根據容器尺寸，自動設定元素尺寸。

• grid-template-columns：repeat(auto-fill,100px);

• 使用 fr 單位設定元素在空間中所佔的比例。

• grid-template-columns：1fr 2fr;//1:2
• grid-template-columns：repeat(2,1fr 2fr);//1:2:1:2

• 組合定義

• grid-template：1fr 2fr;

• minmax方法可以設定取值範圍

間距

1、使用 row-gap 設定行間距。

2、使用 column-gap 定義列間距。

3、gap： 20px 10px; // 行 列

　　行列間距相等則致謝一個值；

元素定位

1、根據容器已經畫好的行列來擺放

• grid-row-start：上邊框所在的水平網格線
• grid-row-end：下邊框所在的水平網格線
• grid-column-start：左邊框所在的垂直網格線
• grid-column-end：右邊框所在的垂直網格線

2、簡寫

• grid-row:2/4;//從第二行開始到第四行結束
• grid-column:2/4;

3、根據偏移量

使用 span 可以設定移動單元格數量，數值只能為正數。

//假設容器三行三列，則示例中元素處於中間

• grid-row-start: 2;
• grid-column-start: 2;
• grid-row-end: span 1;
• grid-column-end: span 1;

4、grid-area

grid-row-start/grid-column-start/grid-row-end/grid-column-end

對齊

設定給容器

1、控制整行/列元素在柵格里的對齊

• justify-items 水平方向
• align-items 垂直方向
• place-items：align-items justify-items；

　　可選值：

• • start：對其單元格的起始邊緣
  • end：對齊單元格的結束邊緣
  • center：單元格內居中
  • stretch：佔滿整個單元格

　　示例：

justify-items：start；//每一橫行的元素都緊貼著單元格的左側

2、整個內容區在容器裡的位置

• justify-content 水平方向
• align-content 垂直方向
• place-content：align-content justify-content；

　　可選值：

　　合在一起移動：

• • start
  • end
  • center
  • stretch

　　兩側有間距：

• • space-around
  • space-between：緊貼容器壁
  • space-evenly：等分

設定給子元素

3、單個元素在單元格內的位置

• justify-self 水平方向
• align-self 垂直方向
• place-self ：align-self justify-self ；

　　可選值：

• • start：對其單元格的起始邊緣
  • end：對齊單元格的結束邊緣
  • center：單元格內居中
  • stretch：佔滿整個單元格