Skip to main content

Grid

Flexbox v.s. Grid​

Grid 與 Flexbox 最大的不同是 Grid 是二維的，它是由一組水平線和垂直線的交叉集合， 也就是說能夠靈活地讓元素放至在指定的格線上，因此通常在一些較複雜的情況會選擇使用 Grid， 而不是只能由上到下或由左到右排序的 Flexbox。

屬性說明​

display​

grid、inline-grid

如果要使用 Grid 來進行排版的話，需要先將外部容器設置為 grid 或 inline-grid。

.grid {
  display: grid;
}

grid-template、grid-template-columns、gird-template-rows​

在使用 Grid 的時候，我們需要先去定義使用多少區塊 ( track )， 以及每個區域 ( track ) 的大小。

  • px、rem
  • fr 會自動計算剩餘的空間，並平均分配給設置的區塊 ( track )。
.grid {
  grid-template: 100px 300px / 50px; /* <rows> / <columns> */
  /* grid-template-columns: 100px 300px; */
  /* grid-template-rows: 50px; */
}
tip

如果在設置區塊大小的時候，會有連續重複大小的區塊，可以使用 repeat() 來完成， 若是不確定需要多少次數的時候，可以使用 auto-fit、auto-fill 依據容器大小自動調欄位數、換行。

  • auto-fit 當容器還有空間時，不會往後延伸新的區塊
  • auto-fill 當容器還有空間時，會往後延伸新的區塊
.grid {
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-columns: repeat(auto-fit, 1fr); */
}
tip

現今大多數的網頁都會做所謂的響應式 RWD，所以在設置數值的時候通常不會使用絕對數值， 而在 Grid 中也可以透過 minmax() 來協助我們做 RWD。

  • minmax(min, max) 它會根據容器的大小在 min 及 max 值間進行縮放。
.grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

grid-auto-columns、grid-auto-rows、grid-auto-flow​

當網格項目遠多於定義的網格時，Grid 一樣會將那些元素視為網格項目， 但它會自動去生成新的格線、區域， 如果需要操作那些自動生成的網格就必須使用 grid-auto-* 相關的屬性。

  • grid-auto-columns、grid-auto-rows 是用來操作多餘網格項目的欄、列大小。
  • grid-auto-flow 是用來操作多餘網格項目的方向， 預設值為 row 也就是多出來的網格會換到新的一列，如果當網格項目大小不相同時， 可透過 dense 來讓網格項目排列緊密，使每個項目間不會有剩餘的空間。
.grid {
  grid-template-columns: 300px 300px 300px;
  grid-auto-rows: 300px;
  grid-auto-flow: column dense;
}

grid-template-areas、grid-area​

可以使用 grid-template-areas 對各個區塊 ( track ) 進行命名， 並且在網格項目上使用 grid-area 屬性，就會自動把網格項目放到指定的區塊上。

.grid {
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 300px 300px 100px;
  grid-template-areas: 
    'sidebar content content'
    'sidebar content content'
    'footer footer footer';
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

grid-column、grid-row​

  • grid-column、grid-row

如果要特別指定網格要佔據多少欄、列時，可以透過 grid-column 及 grid-row 來達成， 或者是使用在後方加上 start、end 個別去設定開始、結束位置。

要注意它是透過指定格線 ( line ) 的位置，而不適區塊 ( track )； 或是可以透過 span 來指定要佔據幾個欄、列。

.box {
  grid-column: 3 / 5; /* 第三條線、第五條線之間的區域 */
  /* grid-column: 3 / span 2; */
  /* grid-column-start: 3; */
  /* grid-column-end: 5; */

  grid-row: span 2; /* 佔據 2 個列高 */
}

grid-gap、grid-column-gap、grid-row-gap​

如果要使每個網格項目之間有空隙時，可以使用 grid-column 及 grid-row-gap 來達成， 或者是使用 grid-gap 一次設定兩個屬性。

.gap-4 {
  grid-gap: 1rem;
}

justify-content、align-content、place-content​

是用來讓網格項目沿著軸線進行對齊，justify 沿著主軸 x-axis；align 則是沿著交錯軸 y-axis， place-content 是用來同時設置這兩個屬性。

justify-items、align-items、place-items​

是用來讓網格項目內的內容沿著軸線進行對齊，justify 沿著主軸 x-axis；align 則是沿著交錯軸 y-axis， place-content 是用來同時設置這兩個屬性。

參考文章​