CSS网格的实际应用 无需框架的实用布局

Flexbox 或 Grid？两者都用。Flexbox 处理单个轴——行 或 列。CSS Grid 一次性处理两个轴。这一区别将指导你做出的每一个布局决策。

真正重要的属性

你可以使用五个属性构建几乎遇到的每一个布局： grid-template-columns, grid-template-rows, gap, grid-area，并且 place-items这里是一个六行实现的居中卡片：

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center 是的简写形式 align-items + justify-items。一行，完美居中的内容，无需计算。

fr 单位：停止使用百分比思考

百分比不考虑间距。 fr (分数单位) 分配 固定值放置后的剩余空间。 这是一个标准的12列网格：

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

每一列 1fr 获得剩余空间的等分，扣除间距后。三列的 repeat(3, 1fr) 永远不会溢出容器——这一点 33.33% 在涉及间距时可能会出错。

自动填充与自动适应：无需媒体查询的响应式网格

这两个关键字都让浏览器决定能容纳多少列。当项目数量少于网格能容纳时，差异就会显现。

自动填充 保留空列轨道。 自动适应 合并它们，让现有项目扩展以填满行。对于卡片网格，你几乎总是希望使用 auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

这是一个完全响应式的卡片网格。无需断点。每个卡片至少宽280px，浏览器会根据屏幕大小尽可能多地排列每行。当视口缩小到280px以下时，它会变为单列。使用 auto-fit 如果你希望在宽屏幕上三个卡片各自扩展并填满行，而不是停留在固定宽度的列中并留有空隙。

手动原型这种布局需要时间。一个 在线CSS网格生成器 让你在编写任何代码之前可视化配置列、行和间距——节省的两分钟调试列计算的功夫是值得的。

命名区域：可读的布局

网格区域用可读的名称替代了位置编号的计算。最清晰的布局示例——标题、侧边栏、主要内容和页脚：

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

这 grid-template-areas 字符串是布局的视觉地图。一个点（.）表示一个空单元格。通过更改字符串来重命名一个区域——无需重新计算行号。

常见的布局（少于10行）

一旦掌握了基础，大多数常见的模式都会简化为几行代码。

侧边栏 + 内容：

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

具有一致垂直节奏的堆叠部分：

.page-sections {
  display: grid;
  gap: 4rem;
}

自动换行图标网格：

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Chrome DevTools 中的网格检查器

打开DevTools，选择元素面板中的任意网格容器，查找元素旁边的 grid 标签。点击它以切换网格叠加层——你能在页面上直接看到每一列、每一行和每一间距。

在 布局 面板（位于Computed和Styles旁边），你可以控制叠加层显示的内容：行号、行名、区域名以及超出网格边界延伸的扩展线。当布局出错时，启用行号并查看叠加层通常能立即发现对齐错误的轨道——比阅读Styles面板中的原始 grid-column 值要快得多。

一个实用习惯：先在DevTools中构建结构，然后在网格看起来正确时将值提交到你的样式表中。

网格仍留下的Flexbox领域

网格适用于二维结构：页面部分、卡片布局、复杂仪表盘。Flexbox在单维流方面更优——导航链接的换行、按钮组、带有内联标签的表单输入，以及任何希望项目根据内容增长或缩小而非定义轨道的场景。

实际应用中，你会将网格用于整体布局，而将Flexbox用于其内部组件。两者配合得当；根据问题的轴向选择合适的方案。

你可能也会喜欢