CSS Grid響應式網頁佈局

原創

2019-03-16 01:35

繼續W3Schools響應式網頁佈局的實現，今日講的是CSS Grid方案。CSS Grid就是爲二維佈局設計的，最適合用來做網頁佈局。目前主流的瀏覽器都已經支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CSS Grid來設計網頁佈局。如果你對CSS Grid並不熟悉，可以參考以下的教學：

視頻連結

B站
YouTube

透過CSS Grid實現響應式網頁佈局的方法有很多種，最簡單，也最能體現CSS Grid的特點的方法是使用grid-template-areas（注意是複數，結尾有s）。這種方法同樣可分爲三步：

爲每一個Grid項賦與一個名字；
用grid-template-areas來控制每一個Grid項所佔的空間；
通過Media Query改變每一個Grid項所佔的空間。

在W3Schools的例子中，一開始便爲每一個div取了一個相應的名稱：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

注意這裏的grid-area是單數。接著在包含這些div的容器中控制它們的所佔空間比例。

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

重點在於grid-template-areas，可以看到這裏的設定便是CSS Grid最終的顯示效果。其中menu是最小寬度單位，header等於六個menu；main等於三個menu；right等於兩個menu；而footer則等於五個menu。menu的寬度爲1個單位，但高度卻跨兩行。

在W3Schools的例子中，並沒有實現響應式的部分，但我們可以自行加入媒體查詢的部分來實現。透過這個實現，你可以看到CSS Grid的神奇、直觀、易用的特點。

@media screen and (max-width: 700px) {
  .grid-container {
    grid-template-areas:
        'header'
        'menu'
        'main'
        'right'
        'footer'
  }
}

在媒體查詢的部分，只要更改grid-template-areas的設定就能改變整個佈局。

同樣地，這個例子也沒有采用移動優先原則。你也可以將這個例子改爲移動優先作爲練習，由於前兩篇中都做過這樣的嘗試，這裏就不再贅述了。

W3Schools系列的代碼都在GitHub上：W3Schools GitHub

W3Schools教學系列

W3Schools是知名的網頁設計／前端開發教學網站，不僅提供HTML、CSS、JavaScript等的詳盡教學，還可以把它當作說明文件（Documents）。有經驗的前端或多或少已經接觸過這個網站，因爲它經常出現在搜索結果的前幾項。其中，它的How To部分更是包含了大量非常實用的例子，例如，如何製作SlideShow（圖片輪播）、Lightbox、Parallax（視差效果）等等。因此我想做一系列的影片專門介紹這些How To。

W3Schools系列全部視頻：

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

CSS Grid響應式網頁佈局 - W3Schools視頻03

視頻連結