CSS 佈局模式

CSS 佈局模式，有時簡稱為佈局，是一種基於盒子與其兄弟和祖輩盒子的互動方式來確定盒子的位置和大小的演算法。有以下幾種形式：

塊佈局：用來佈置檔案。塊佈局包含以文件為中心的功能，例如浮動元素或將其放置在多列上的功能。
行內佈局：用來佈置文字。
表格佈局：用來佈置表格。
定位佈局：用來對那些與其他元素無互動的定位元素進行佈置。
彈性盒子佈局：用來佈置那些可以順利調整大小的複雜頁面。
網格佈局：用來佈置那些與一個固定網格相關的元素。

注意: 並非所有 CSS 屬性適用於所有佈局模式。大多數屬性適用於一到兩種佈局模式，如果將屬性設定在參與其他（原文another,指三者或三者以上。）佈局模式的元素上則會不起作用。

CSS網格佈局用於將頁面分割成數個主要區域，或者用來定義元件內部元素間大小、位置和圖層之間的關係。

像表格一樣，網格佈局讓我們能夠按行或列來對齊元素。但是，使用`CSS`網格可能還是比`CSS`表格更容易佈局。例如，網格容器的子元素可以自己定位，以便它們像`CSS`定位的元素一樣，真正的有重疊和層次。

基本示例

以下示例顯示了一個三列軌道的網格，其中建立的行最小為100畫素，最大為自動。條目使用線性定位放置在網格上。

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

參考

CSS屬性

grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
grid-row-start
grid-column-start
grid-row-end
grid-column-end
grid-row
grid-column
grid-area
grid-row-gap
grid-column-gap
grid-gap

CSS函式

repeat()
minmax()
fit-content()

CSS 資料型別

<flex>

術語表

指南

外部資源

Examples from Jen Simmons
Grid by Example - a collection of usage examples and video tutorials
Codrops Grid Reference
Firefox DevTools CSS Grid Inspector
CSS Grid Playground
Grid Garden - 一個學習CSS 網格的遊戲