內容目錄
之前因為想看 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.
發佈留言