高级 CSS Grid：Subgrid、瀑布流与不可能布局

Subgrid：完美卡片对齐

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.product-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid; /* 使用父级行轨道 */
}

.product-card__image  { grid-row: 1; }
.product-card__title  { grid-row: 2; }
.product-card__price  { grid-row: 3; }
.product-card__button { grid-row: 4; align-self: end; }

圣杯布局

.app {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 250px;
  min-height: 100vh;
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

密集自动放置

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense; /* 填充空隙 */
}
.featured { grid-column: span 2; grid-row: span 2; }

RAM：无需断点的响应式

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
}

-> 使用 Color Converter 检查网格颜色。