Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

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

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

絕對置中

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

「置中」一直是在新手階段最常被提到的一個問題,其實置中的方法有許多種,包含用 margin 的方式、用 flexjustify-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-columnsminmax

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-rowsgrid-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.

Eric Chuang
Eric Chuang

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

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