從視窗標準到獨立組件的典範轉移
傳統的響應式網頁設計依賴螢幕（視口）的整體寬度。然而，在當今元件導向的設計世界中，UI 元件的可用寬度會根據它們所在的父元素（側邊欄或主列）而有所不同。
隨著CSS Grid的「子網格」和「容器查詢」的出現，佈局的靈活性和可維護性得到了極大的提升。
配方 1：「subgrid」在對齊卡片高度的同時同步按鈕位置
即使在多列卡片UI中標題字元數不均勻，每張卡片中「圖像、標題、文字和按鈕」的高度也可以在水平線上完美對齊。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4; /* 画像・タイトル・本文・フッターの4行を親グリッドに同期 */
}
不需要任何 JavaScript 來計算每張卡片的高度。
方法 2：@container 其佈局依其寬度調整
卡片組件會根據其所在容器的寬度自動在水平和垂直對齊之間切換。
.card-wrapper {
container-type: inline-size;
container-name: card-container;
}
@container card-container (min-width: 450px) {
.card-content {
flex-direction: row; /* 横幅に余裕があれば横並びへ自動変形 */
}
}
您可以在主頁的寬區域和側邊欄的窄區域中重複使用相同的元件。
實際實作的概念
子網格和容器查詢已經在主要的現代瀏覽器中完全支援。擺脫整個螢幕上的斷點造成的破壞，並轉向每個組件都可以獨立存在的 CSS 設計。