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 就沒有用了。藉由 gridflex 的交互運用,便能製作出更精準的對齊方式。

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.

延伸閱讀

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料