从视口标准到独立组件的范式转变
传统的响应式网页设计依赖于屏幕（视口）的整体宽度。然而，在当今面向组件的设计世界中，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 设计。