巨集版面配置說明介面中較大的網頁範圍組織。
套用任何版面配置前，請先確認內容流程是否合理。 小螢幕會採用這個單欄預設排序方式。
<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
對於這個特定版面配置，您也可以使用 彈性方塊。 樣式應如下所示：
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
不過，彈性方塊版本需要更多 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。
隨堂測驗
測試您對巨集版面配置的瞭解。
下列哪句話最貼切說明巨集版面配置？
巨集版面配置一律會使用媒體查詢，配合不同螢幕大小調整版面配置嗎？
現在您已對網頁層級巨集版面配置有初步概念，接下來請將注意力轉向網頁內的元件。這就是微型版面配置的領域。