10 種當代版面配置 CSS 語法一行搞定 (上)

之前因為想看 Google 開發人員大會的直播，因此訂閱了 Google Chrome Developers 的頻道。某天在頻道中看見這部影片，收錄了 10 種當代版面配置的 CSS 語法。因為這部影片的關係，我對於 grid 的使用有了更多的理解。

絕對置中

.super-centered {
  display: grid;
  place-items: center;
}

「置中」一直是在新手階段最常被提到的一個問題，其實置中的方法有許多種，包含用 margin 的方式、用 flex 的 justify-content。然而，如果今天使用了 display: grid 這種方法，便可以輕鬆的把子層級的物件置中了。

瀏覽器支援度

display: grid 除了 Opera Mini 外，幾乎所有瀏覽器都支援。place-items 則是除了 Edge 與 Opera Mini 外都可以使用。

子階層堆疊

作者用了 the Deconstructed Pancake 來形容這種版面配置，這是一般在電商網站常見的配置方式。透過 flex: 1 1 {臨界寬度} 的方式，讓子階層可以針對檢視區寬度變化寬度。

.pancake {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pancake div {
  height: 50px;
  text-align: center;
  background: #773355;
  color: #fff;
  flex: 1 1 150px;
  margin: 5px;
}

瀏覽器支援

基本上大部分的瀏覽器都支援 display: flex。

資訊欄位版面配置

藉由 grid 來製作資訊欄位 (sidebar) 時，可以使用 minmax 這個屬性值，自訂子元素的寬度上下限，使左邊的欄位最小不低於 150px。

.a-sidebar {
  display: grid;
  grid-template-columns: minmax( 150px, 25% ) 1fr;
}

瀏覽器支援

支援 display: grid 的瀏覽器都支援 grid-template-columns 與 minmax。

Grid 堆疊

透過 Grid 堆疊的方式，可以讓頁首和頁尾不會因為檢視區縮放改變大小，而是根據內容大小來決定頁首頁尾大小。是適合用於 App 或 Web App 的版面配置方式。

.pancake-stack {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

瀏覽器支援

支援 display: grid 的瀏覽器都支援 grid-template-rows。

Holy Grail 版面配置

這是當代 (或者說上一代?) 網站設計相當經典的版面配置方式。但是透過 display: grid 的方式，我們可以更精確地直接在頁面上繪製自己希望的樣貌。

當要同時定義 grid-template-rows 與 grid-template-columns 時，可以使用 grid-template 代替，先定義列高、再定義欄寬。

在未指定子元素佔據的欄、列數時，預設會將每個子元素依序排列於單一網格中。但是以頁首頁尾來說，因為需要佔滿所有欄寬，因此透過 grid-column: 1 / 4; 來代表從網格的第一條線，到第四條線 (共三格) 的範圍。

.holy-grail {
  display: grid;
  /* 透過 grid-template，同時定義 grid-template-rows 與 grid-template-columns */
  grid-template: auto 1fr auto / auto 1fr auto;
}
.holy-grail div {
  padding: 1em;
}
.holy-grail .header {
  background: #eeccaa;
  grid-column: 1/4;
}

.holy-grail .footer {
  background: #aaccee;
  grid-column: 1/4;
}

.holy-grail .l-sidebar {
  background: #eeaacc;
}

.holy-grail .content {
  background: #ccaaee;
}

.holy-grail .r-sidebar {
  background: #aaeecc;
}

瀏覽器支援

支援 display: grid 的瀏覽器都支援上述寫法。

結語

雖然是一陣子之前看到的影片，但是第一次按照他的範例全部實作一次。影片中介紹到的許多 CSS 語法，至今在 WordPress 的區塊編輯器中，也能時常看到。

為了讓大家能夠更能夠直接體驗每種版面配置的樣式，因此附上 Codepen 的執行結果如下：

See the Pen 10 Modern layouts in 1 line of CSS (part.1) by Eric Chuang (@eric-chuang) on CodePen.