之前因為想看 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.
