CSS Grid高级布局
CSS Masonry 瀑布流布局
/* CSS 原生 masonry（Chrome flags / Firefox） */
.masonry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 16px;
}
/* 后备方案：多列布局 */
.masonry-fallback {
column-count: 3;
column-gap: 16px;
}
.masonry-fallback > * {
break-inside: avoid;
margin-bottom: 16px;
}
/* 近似方案：auto-rows 小单位 */
.pseudo-masonry {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 10px;
gap: 16px;
}
.item--tall { grid-row: span 30; }
.item--medium { grid-row: span 20; }
.item--short { grid-row: span 10; }
网格模板区域
.page-layout {
display: grid;
grid-template-columns: 240px 1fr 300px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
min-height: 100vh;
}
.site-header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.right-aside { grid-area: aside; }
.site-footer { grid-area: footer; }
/* 移动端响应式 */
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"aside"
"footer";
}
.sidebar { display: none; }
}
Subgrid（子网格）
/* 跨列对齐卡片内部元素 */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* 继承父级行轨道 */
}
.card__header { /* 第 1 行：跨所有卡片对齐 */ }
.card__body { /* 第 2 行：自动展开 */ }
.card__footer { /* 第 3 行：固定在底部 */ }