談到版面配置，我們通常會想到頁面層級的設計。但頁面中的較小元件可以有自己的獨立版面配置。
理想情況下，這些元件層級的版面配置會自動調整自身大小， 無論在頁面上的位置為何。有時您可能不知道元件會放在主要內容欄、側欄，還是兩者皆是。 如果不確定元件的最終位置，請務必確保元件可以自行調整至容器。
格線
CSS 格線不僅適用於網頁層級的版面配置，對於其中的元件也適用。
在本例中，::before 和 ::after
虛擬元素會在標題兩側建立裝飾線。標題本身就是格線容器。個別元素會排列成行，填滿可用空間。
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
瞭解如何在 Chrome 開發人員工具中檢查格線版面配置。
Flexbox
顧名思義，您可以使用 flexbox 讓元件具有彈性。您可以宣告元件中的哪些元素應具備最小或最大尺寸，並讓其他元素彈性調整大小，以配合這些元素。
在這個範例中，圖片佔用四分之一的可用空間，文字則佔用另外四分之三。但圖片不會超過 200 像素。
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
瞭解如何使用 Chrome 開發人員工具檢查彈性方塊版面配置。
容器查詢
Flexbox 可讓您從內容開始設計。您可以指定元素的參數 (應縮窄或加寬的程度)，並讓瀏覽器找出最終實作方式。
但元件本身並不知道自己的環境。因此無法判斷是否用於主要內容或側欄。因此，元件版面配置可能比網頁版面配置更難處理。 如要套用符合情境的樣式，元件需要瞭解的不只是所在可視區域的大小。
使用網頁版面配置時，您會知道容器的寬度，因為容器是瀏覽器可視區域；媒體查詢會回報網頁層級容器的尺寸。
如要回報任何容器的維度，請使用容器查詢。
首先，請定義哪些元素做為容器。
main,
aside {
container-type: inline-size;
}
這表示您要查詢內嵌維度。如果是英文文件，這就是水平軸。您將根據容器的寬度變更樣式。
如果元件位於其中一個容器內，您可以套用樣式，方式與套用媒體查詢類似。
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
如果媒體物件位於寬度小於 25em 的容器中，系統不會套用彈性方塊樣式。圖片和文字會垂直排列。
但如果容器元素比 25em 寬，圖片和文字就會並排顯示。
使用容器查詢，即可獨立設定元件樣式。您可以根據容器元素的寬度編寫規則，不再需要考慮檢視區塊的寬度。
合併查詢
您可以針對網頁版面配置使用媒體查詢，並針對網頁中的元件使用容器查詢。
這裡的頁面整體結構包含 main 元素和 aside 元素。
這兩個元素內都有媒體物件。
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
當可視區域寬度大於 45em 時，媒體查詢會將格線版面配置套用至 main 和 aside 元素。
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
媒體物件的容器查詢規則維持不變：只有在包含元素寬度大於 25em 時，才套用水平彈性方塊版面配置。
容器查詢是微型版面配置的重大突破。 元件可以獨立運作，不受瀏覽器可視區域影響。
隨堂測驗
測試您對微版面配置的瞭解程度。
格線和彈性盒模型都適用於微型版面配置嗎？
先前，您已瞭解網頁層級巨集版面配置。您現在瞭解元件層級的微型版面配置。
接著，您將深入瞭解內容的建構區塊，並學習如何製作回應式圖片。首先，您會瞭解回應式排版。