Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
10 種當代版面配置 CSS 語法一行搞定 (下)
昨天介紹了 5 種 10 modern layouts in 1 line of CSS 的版面配置，今天將繼續剩下 5 種版面配置。
內容目錄
12 欄版面配置
當代網頁設計很重要的一種版面配置方式，便是 12 欄版面配置。透過將版面切割為 12 欄，藉此完成較複雜的排列組合。透過 display: grid; 的方式，可以輕鬆定義 12 欄的版面配置方式。
在這裡需要介紹 grid 專用的一個函式：repeat()。藉由 repeat( 次數, 欄寬 ) 的方法，切分出 12 個等寬的欄位。
.twelve-grid {
display: grid;
grid-template-columns: repeat( 12, 1fr );
}
.twelve-grid #span-1 {
background: #aaccee;
grid-column: 1/13;
}
.twelve-grid #span-2 {
background: #aaeecc;
grid-column: 5 / 9;
}
.twelve-grid #span-3 {
background: #cceeaa;
grid-column: 4 / 12;
}
.twelve-grid #span-4 {
background: #ccaaee;
grid-column: 1 / 6;
}瀏覽器支援度
display: grid 除了 Opera Mini 外，幾乎所有瀏覽器都支援。
RAM (Repeat, Auto and Minmax) 配置
在製作文章列表時，可以透過 display: grid 來製作網格式的配置方式，並可以藉由 grid-template-column 來決定每篇文章要顯示的寬度。
auto-fill 這個屬性值可以讓欄位寬度自行延展，並填滿所有欄位，並搭配 minmax( {欄寬下限}, 1fr ) 的方式，讓欄寬可以隨檢視區寬度產生回應式樣式。
此外，透過 grid-gap 的樣式屬性，可以決定每個欄位的間距，不需要像以前一樣重新計算邊界 (margin) 的屬性。
.ram {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
grid-gap: 1rem;
}
.ram .span-1 {
background: #aaccee;
padding: 16px;
}排列對齊
雖然 display: grid 對當代的網站樣式來說相當重要，但並不代表 display: flex 就沒有用了。藉由 grid 與 flex 的交互運用，便能製作出更精準的對齊方式。
在 flex 中，可以透過 flex-direction: column 讓你的 flex 區塊可以變成垂直排列，並透過 justify-content: space-between 讓子階層元素可以更整齊的分散排列。
.line-up {
display: grid;
grid-template-columns: repeat( 3, 1fr );
grid-gap: 1rem;
}
.line-up > div {
background: #eeaacc;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.line-up .box {
padding: 10% 50%;
background: #aaccee;
}框限你的樣式值
透過 clamp() 這個 CSS 函式，框限你的樣式屬性值，譬如說 clamp( 23ch, 50%, 46ch) 便代表「寬度是檢視區的 50%，但最小不能低於 23 個字母寬，最大則不能超過 46 個字母寬」。
.clamp {
display: grid;
place-items: center;
}
.clamp .card {
display: flex;
flex-direction: column;
padding: 1rem;
background: #eacaa9;
width: clamp( 23ch, 50%, 46ch );
}
.clamp .card .img {
width: 100%;
height: 100px;
background: #aaeecc;
}固定寬高比
固定寬高比 (aspect-ratio) 在網頁前端開發中，一直是詢問度很高的問題。在影片中有介紹到，未來的各瀏覽器版本中將會新增支援 aspect-ratio 這個樣式屬性，但目前只能先透過 padding 方式來製作固定寬高比的效果。
.aspect-ratio {
display: grid;
place-items: center;
}
.aspect-ratio .card {
width: 50%;
background: #eeccaa;
padding: 1rem;
}
.aspect-ratio .img {
aspect-ratio: 16 / 9; /* 目前不支援 */
padding-top: 56.25%; /* 以 16:9 為例 */
background-image: url( '圖片網址' ); /* 將圖片改以背景圖片的方式顯示 */
background: #eeaacc;
}瀏覽器支援度
目前瀏覽器尚不支援 aspect-ratio，因為這個功能仍在實驗中。
結語
用兩天的時間，重新練習了一次 Google Chrome Developers 上提供的 10 種版面配置語法。之前在看完這部影片後，在這次公司官網改版過程中大量的使用了 display: grid; 的版面配置，而用了 grid 後，整個排版的彈性變得更高，對頁面元素的掌握度也有所提升。
See the Pen 10 Modern layouts in 1 line of CSS (part.2) by Eric Chuang (@eric-chuang) on CodePen.
延伸閱讀
