巨集版面配置

巨集版面配置是指介面上更大、更豐富的頁面結構。

雙欄版面配置的線框稿，旁邊有和窄版檢視畫面相同的版面配置。

套用任何版面配置之前確保內容流暢性這個單一資料欄的預設順序是較小的螢幕。

<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;
  }
}

注意： 雖然指定 min-inline-size 而非 min-width 是較合理的做法，但邏輯屬性尚無法用於媒體查詢。

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 或格線中，都不會有任何與微距版面配置特別相關的內容。

低階版面配置，螢幕的面積較小。

請再試一次！

採用涵蓋大量螢幕的高階版面配置。

🎉? Macro 版面配置是網頁的基本版面配置，橫跨大量視覺區域，且通常會根據頁面大小的媒體查詢進行調整。

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

是

請再試一次！巨集版面配置並非由其使用媒體查詢所定義。

否

🎉? Macro 版面配置會根據內容調整至合適的大小、填滿可用空間等等，而且不必進行媒體查詢。

瞭解網頁層級的巨集版面配置後，並聚焦在網頁中的元件這是微型版面配置：