CSS Grid 网格布局详解

.container {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.header { grid-area: header; background-color: #333; color: white; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #f5f5f5; padding: 20px; }
.main { grid-area: main; background-color: #fff; padding: 20px; }
.aside { grid-area: aside; background-color: #f5f5f5; padding: 20px; }
.footer { grid-area: footer; background-color: #333; color: white; padding: 20px; }

/* 响应式：小屏幕改为单列堆叠 */
@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

.card-grid {
  display: grid;
  /* auto-fit：自动计算能放下几列；minmax 保证每列不小于 280px */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 12px;
}

/* 让首图占据 2x2 的大格，形成焦点 */
.gallery__item--feature {
  grid-column: span 2;
  grid-row: span 2;
}

/* 某张横图横跨两列 */
.gallery__item--wide {
  grid-column: span 2;
}

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 经典12栏系统 */
  gap: 16px;
}

.content {
  grid-column: 1 / 9;   /* 占前8栏 */
}
.rail {
  grid-column: 9 / 13;  /* 占后4栏 */
}

.page {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [content-start] minmax(0, 960px)
    [content-end] 1fr [full-end];
}

.hero {
  grid-column: full-start / full-end; /* 通栏 */
}
.article {
  grid-column: content-start / content-end; /* 居中内容区 */
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;   /* 继承父网格的行轨道 */
  grid-row: span 3;              /* 图片、标题、按钮各占一行且跨卡片对齐 */
}

.admin-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w, 240px) 1fr;
  grid-template-rows: 56px 1fr 40px;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  height: 100vh;
}

.admin-shell.collapsed {
  --sidebar-w: 64px; /* 折叠时改变量即可，布局自动重排 */
}

.admin-header { grid-area: header; }
.admin-sidebar { grid-area: sidebar; overflow-y: auto; }
.admin-main { grid-area: main; overflow-y: auto; }
.admin-footer { grid-area: footer; }

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: 10px;      /* 用极小行高做「像素级」高度控制 */
  grid-auto-flow: dense;      /* 尽量回填空洞，减少空白 */
  gap: 12px;
}

/* 每个项目按内容高度跨越若干行（通常配合少量 JS 计算 span 值） */
.masonry__item { grid-row: span var(--row-span, 20); }

.hero {
  display: grid;
  place-items: center; /* 一行同时水平垂直居中 */
  min-height: 100vh;
}

.form {
  display: grid;
  grid-template-columns: max-content 1fr; /* 标签自适应宽，输入占满 */
  gap: 12px 16px;
  align-items: center;
}

.form label { text-align: right; }

/* 需要独占整行的字段 */
.form .full { grid-column: 1 / -1; }

/* 默认 row：从左到右、从上到下填充 */
.flow-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;      /* 横向优先 */
  grid-auto-rows: 100px;    /* 隐式行统一 100px 高 */
  gap: 8px;
}

/* column：纵向优先，适合需要「先排满一列」的场景 */
.flow-column {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;   /* 纵向优先 */
  grid-auto-columns: minmax(120px, 1fr); /* 隐式列尺寸 */
  gap: 8px;
}

/* dense：让大项目留下的空洞被后面的小项目回填，减少空白 */
.flow-dense {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
  grid-auto-rows: 120px;
  gap: 8px;
}
.flow-dense .big { grid-column: span 2; grid-row: span 2; }

/* min-content / max-content：标签列贴合内容，值列占剩余 */
.kv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
}

/* fit-content：说明列内容多时最宽 320px，内容少时贴合内容 */
.doc-grid {
  display: grid;
  grid-template-columns: 160px fit-content(320px) 1fr;
  gap: 12px;
}

/* clamp 做流体列宽：随视口平滑变化，无需断点 */
.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 25vw, 300px), 1fr));
  gap: 16px;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 16px;
  padding: 16px;
}

/* 顶部 4 张 KPI，各占 3 栏 */
.kpi { grid-column: span 3; }

/* 主图表：占左侧 8 栏、跨 2 行 */
.chart-main {
  grid-column: 1 / 9;
  grid-row: span 2;
}

/* 右侧两张小图各占 4 栏、各 1 行 */
.chart-side { grid-column: 9 / 13; }

/* 底部宽表格：通栏 */
.table-wide { grid-column: 1 / -1; }

/* 响应式：中屏两列，小屏单列 */
@media (max-width: 1024px) {
  .kpi { grid-column: span 6; }
  .chart-main { grid-column: 1 / -1; grid-row: auto; }
  .chart-side { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .kpi { grid-column: 1 / -1; }
}

/* 让每个项目在自己的单元格里右下角对齐 */
.grid-align {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
  justify-items: end;   /* 横向靠右 */
  align-items: end;     /* 纵向靠下 */
  gap: 8px;
}

/* 单个项目覆盖默认，居中显示 */
.grid-align .featured {
  justify-self: center;
  align-self: center;
}

/* 整个网格在超大容器里居中（网格总宽小于容器时才有效） */
.grid-content {
  display: grid;
  grid-template-columns: repeat(3, 120px); /* 固定列宽，会有剩余空间 */
  justify-content: center;  /* 网格整体横向居中 */
  align-content: center;    /* 网格整体纵向居中 */
  min-height: 100vh;
  gap: 16px;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  display: grid;
  grid-template-rows: subgrid; /* 继承父网格的行轨道 */
  grid-row: span 3;            /* 每张卡跨 3 行：标题 / 正文 / 按钮 */
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
}

/* 父网格需要显式定义这 3 行，subgrid 才能继承 */
.card-list {
  grid-template-rows: auto 1fr auto;
}

.card-region {
  container-type: inline-size; /* 声明为查询容器 */
}

.card-region .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 依据「容器」而非「视口」宽度切换列数 */
@container (min-width: 480px) {
  .card-region .grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 780px) {
  .card-region .grid { grid-template-columns: repeat(3, 1fr); }
}

.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* minmax(0,1fr) 防溢出 */
  gap: 24px;
}

/* 工具类：按需占列 */
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: 1 / -1; }

/* 偏移：从第 N 条线开始 */
.offset-2 { grid-column-start: 3; }

@media (max-width: 768px) {
  /* 小屏统一降为整行，避免挤压 */
  [class^="col-"] { grid-column: 1 / -1; }
}