建構網頁應用程式時,必要的首要項目之一是安排應用程式內容的方式。
無論是在網站或應用程式上,許多設計人員都會使用虛構的格線來安排內容的位置。CSS 群組一直努力簡化版面配置,而 CSS 格線版面配置模組現已在瀏覽器中推出。
您可以在 Chrome 中透過實驗旗標試用這項功能。這個版本也自 10 版起在 IE 中導入,應該很快就會推廣到大多數的瀏覽器。
內容提要
- CSS 格線版面配置可讓您定義版面配置的列和欄
- 格線可進行調整,以使用可用空間
- 內容順序可以與格狀容器顯示順序無關
- 版面配置可根據媒體查詢進行變更,讓回應式設計更加簡單
- 內容可能會重疊 (啟用無法以其他方法完成的版面配置)
- 格狀版面配置快速
請觀看以下簡介影片,進一步瞭解 CSS 格線版面配置的運作方式 (投影片如下:
立即體驗
現在在 Chrome 中使用 CSS 格線版面配置即可輕鬆上手。首先,你必須開啟實驗旗標來啟用這項功能。
首先載入 chrome://flags 網址,然後向下捲動至「啟用實驗性 Web Platform 功能」選項,如下所示:
只要按一下「啟用」即可啟用標記,系統隨即會顯示重新啟動瀏覽器的提示,如下所示:
現在只要按一下「立即重新啟動」按鈕,即可重新啟動瀏覽器,可以開始試用 CSS 格線版面配置。
分享寶貴意見
CSS 格線版面配置是網頁內容的全新基石,但一如往常,我們都想知道開發人員的想法。您可以透過多種方式提供意見,例如在這裡留言、傳送郵件至 W3C CSS 工作群組清單,並在主旨行中加上「[css-grid]」,或是記錄錯誤或張貼在網誌中,即可分享您的意見。我們期望看到您利用這個超實用的新功能建立卓越的版面配置。