巨集版面配置

巨集版面配置是用來描述介面的較大頁面架構。

雙欄版面配置的線框，旁邊有某個欄的版面配置，以便縮小視圖。

套用任何版面配置之前，您應確保內容的流動有意義。這個單一資料欄的預設順序是小螢幕取得的結果。

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

當您排列這些個別網頁層級元件時，就是要設計巨集版面配置，也就是網頁的概略檢視。 透過媒體查詢，您可以在 CSS 中提供規則，說明此檢視畫面應如何配合不同的螢幕大小調整。

格線

CSS 格線是針對網頁套用版面配置的絕佳工具。 在上述範例中，假設畫面寬度足夠，您希望建立雙欄版面配置。如要在瀏覽器寬度足夠時套用這個雙欄版面配置，請使用媒體查詢來定義指定中斷點上方的格線樣式。

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Flexbox

對於這個特定版面配置，您也可以使用 flexbox。樣式看起來會像這樣：

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }

  main article {
    flex: 2;
  }

  main aside {
    flex: 1;
  }
}

不過，Flexbox 版本需要使用更多 CSS。每一欄都有各自的規則，用於說明應佔的空間大小。 在格線範例中，系統會將相同的資訊封裝到包含元素的單一規則中。

您是否需要媒體查詢？

您不一定要使用媒體查詢。當您對一些元素套用變更時，媒體查詢可以正常運作，但如果版面配置需要大量更新，媒體查詢可能會因為許多中斷點而失控。

假設您有一個包含資訊卡元件的頁面。 資訊卡絕不會寬到 15em，建議您在同一行加入更多資訊卡。 您可以使用 30em、45em、60em 等中斷點編寫媒體查詢，但會相當繁瑣且難以維護。

您可以改為套用規則，讓資訊卡自動佔據適當空間。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

您可以利用 Flexbox 達到類似的版面配置。在本範例中，如果資訊卡不足以填滿最後一列，其餘資訊卡就會延展來填滿可用空間，而非排成欄。如要對齊列和欄，請使用格線。

.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex-basis: 15em;
  flex-grow: 1;
}

在 Flexbox 或格線中套用一些智慧規則，就能以最少的 CSS 和任何媒體查詢來設計動態巨集版面配置。操作起來更省力，因為瀏覽器代您進行計算。 如要查看一些不必使用媒體查詢就能流暢執行的新型 CSS 版面配置範例，請參閱 1linelayouts.com。

隨堂測驗

測驗您對巨集版面配置的相關知識。

下列關於巨集版面配置的敘述，何者最貼切？

包含其他版面配置的版面配置。
請再試一次！大部分的版面配置包含其他版面配置。
使用 Flexbox 或格線的設計。
請再試一次！Flexbox 或格線沒有適用於巨集版面配置的特定內容。
低階版面配置，可涵蓋少量螢幕。
請再試一次！
高層級版面配置可涵蓋大量螢幕。
🎉? 巨集版面配置是適用於頁面的基礎版面配置，涵蓋大量的視覺區域，而且經常會根據頁面大小媒體查詢進行調整。

巨集版面配置一律會使用媒體查詢來適應不同螢幕大小嗎？

是
請再試一次！巨集版面配置不是以使用媒體查詢的方式定義。
false
🎉? 巨集版面配置可以配合內容、填滿可用空間等項目進行調整，完全不需要進行媒體查詢。

現在您對網頁層級巨集版面配置有一些概念了 現在開始注意網頁上的元件這是微型版面配置的運作範圍。