CSS网格布局入门：display:grid与grid-template-columns详解

想要掌握CSS网格布局？本文为你详细解读`display: grid`和`grid-template-columns`的核心用法。首先，将CSS容器设置为`display: grid`，开启网格布局。然后，利用`grid-template-columns`定义列结构，通过`fr`单位实现响应式列宽分配，或使用`repeat()`函数简化重复列的定义。`minmax()`函数则能创建自适应列，保证最小宽度。此外，`gap`属性用于设置网格间距，提升布局美观度。最后，通过`grid-column`、`grid-row`或`grid-area`精确控制子元素的位置和跨度，构建灵活的二维布局。掌握这些技巧，轻松驾驭CSS网格布局，打造更具吸引力的网页设计。

将CSS容器转变为网格布局的核心是设置display: grid，并通过grid-template-columns定义列结构，结合fr、repeat()、minmax()等实现响应式布局，利用gap设置间距，再通过grid-column、grid-row或grid-area精确控制子元素位置与跨距，实现灵活的二维布局。

将一个CSS容器转变为网格布局，核心做法是为其设置display: grid属性，这会开启网格布局上下文。接着，通过grid-template-columns（或grid-template-rows）来定义网格的列（或行）结构，指定它们的数量、宽度和排列方式，从而精确控制其子元素的布局。

解决方案

要实现CSS容器的网格布局，我们首先需要选中目标容器，然后应用display: grid。这一步至关重要，它告诉浏览器这个元素及其子元素将遵循网格布局规则。

.container {
  display: grid;
  /* 其他网格属性将在这里定义 */
}

接下来，我们利用grid-template-columns属性来定义网格的列。这个属性接受一系列值，每个值代表一列的宽度。这些值可以是固定的像素（px）、百分比（%）、视口单位（vw, vh）或者更具弹性的fr（fraction）单位。fr单位非常强大，它允许我们根据可用空间按比例分配列宽。

例如，创建一个三列布局：

• 等宽三列： grid-template-columns: 1fr 1fr 1fr; 或者更简洁地 grid-template-columns: repeat(3, 1fr); 这意味着三列将平分容器的可用宽度。
• 固定宽度与弹性宽度结合： grid-template-columns: 200px 1fr 2fr; 第一列固定200px，剩余空间被第二列和第三列按1:2的比例分配。
• 使用minmax()创建自适应列： grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 这是一个非常实用的模式，它会根据容器宽度自动创建尽可能多的列，每列的最小宽度为250px，最大则平分剩余空间。当空间不足以容纳更多250px的列时，列数会自动减少。

除了grid-template-columns，我们通常还会使用gap属性（或者grid-column-gap和grid-row-gap）来定义网格单元格之间的间距，让布局看起来更整洁。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 示例：响应式三列布局 */
  gap: 20px; /* 定义网格单元格之间的间距 */
  padding: 15px; /* 容器内边距 */
  background-color: #f0f0f0;
}

.item {
  background-color: #007bff;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

通过这些基本的设置，我们就能够让CSS容器实现强大的网格布局，并且它的子元素会根据我们定义的网格结构自动排列。

CSS Grid与Flexbox：何时选择哪种布局方案？

在我看来，CSS Grid和Flexbox常常被拿来比较，但它们并非竞争关系，更像是互补的工具。理解它们的核心差异是选择的关键。Flexbox，顾名思义，是“弹性盒子”，它主要处理一维布局——要么是行，要么是列。你可以在一个方向上对项目进行对齐、分布和排序。比如说，导航栏里的一排链接，或者表单里水平排列的输入框和按钮，Flexbox处理起来就非常得心应手。它擅长于内容驱动的布局，即内容决定了空间的分配。

而CSS Grid，则是一个真正的二维布局系统。它允许你同时定义行和列，从而构建出复杂的网格结构。当我需要构建整个页面的宏观布局，比如头部、侧边栏、主内容区和底部，或者一个多列多行的卡片展示区时，我几乎总是会首先考虑Grid。它提供了一个画布，让我能够像设计师一样“画”出布局，精确控制每个区域的位置和大小，甚至可以重叠。Grid更像是布局驱动的，你先定义好网格，然后将内容放置进去。

所以，我的经验是，对于整体页面框架、复杂的多行多列布局，尤其是那些需要精确控制区域划分的场景，CSS Grid是首选。而对于组件内部的单行或单列排列、对齐和间距控制，Flexbox则更加灵活和高效。很多时候，我会在一个Grid定义的区域内部，再使用Flexbox来排列该区域内的子元素，两者结合起来，能实现非常强大且语义化的布局。

响应式设计中，CSS Grid的动态布局策略有哪些？

在响应式设计中，CSS Grid的强大之处在于它能让我们以非常灵活且语义化的方式调整布局，以适应不同屏幕尺寸和设备。我发现，有几个策略是我在实际项目中反复使用的：

一个非常核心的技巧是利用fr单位和repeat()结合auto-fit（或auto-fill）与minmax()。比如，grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 这行代码简直是响应式卡片布局的瑞士军刀。它会根据容器的可用宽度，自动创建尽可能多的列，每列的最小宽度是280px。当容器变窄时，列数会自动减少；当容器变宽时，列数会自动增加。1fr确保了列会尽可能地填充可用空间，而minmax则保证了每个卡片不会变得过小或过大，保持了良好的可读性。auto-fit会“收缩”空的轨道，而auto-fill则会保留它们，我通常更偏爱auto-fit，因为它能更紧凑地填充内容。

另一个不可或缺的策略是媒体查询（Media Queries）。虽然auto-fit已经很智能，但有时我们可能需要在特定的断点（breakpoint）处彻底改变网格的结构，比如从手机上的单列布局变为平板上的两列，再到桌面上的三列。这时，我们可以在媒体查询中重写grid-template-columns或grid-template-areas。

.container {
  display: grid;
  grid-template-columns: 1fr; /* 默认：手机端单列 */
  gap: 15px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* 平板：两列 */
  }
}

@media (min-width: 1200px) {
  .container {
    grid-template-columns: 200px 1fr 250px; /* 桌面：固定侧边栏和主内容 */
    grid-template-areas:
      "header header header"
      "nav    main   aside"
      "footer footer footer";
  }
}

通过grid-template-areas，我们甚至可以完全重新排列页面的不同区域，这在响应式设计中提供了极大的灵活性和可维护性。我们只需要在不同的断点重新定义区域的布局，而HTML结构保持不变，这简直是布局上的“魔法”。

除了网格定义，如何精确控制单个网格项目在布局中的行为？

当我们定义了容器的网格结构后，接下来就是如何让网格内的子项目（grid items）按照我们的意图进行排列和定位。这不仅仅是把它们扔进网格那么简单，CSS Grid提供了一系列强大的属性来精细控制每个项目的行为。

最常用的就是grid-column和grid-row属性，它们是grid-column-start/grid-column-end和grid-row-start/grid-row-end的简写形式。通过这些属性，我们可以指定一个网格项目从哪条线开始，到哪条线结束，从而占据多列或多行。

.item-1 {
  grid-column: 1 / 3; /* 从第1条列线开始，到第3条列线结束，占据两列 */
  grid-row: 1 / span 2; /* 从第1条行线开始，向下跨越2行 */
}

.item-2 {
  grid-column: 3 / 4; /* 占据第3列 */
  grid-row: 1 / 2; /* 占据第1行 */
}

这里，span关键字特别有用，它允许项目跨越指定数量的轨道，而不是指定结束线。这在轨道数量不确定或者需要动态调整时非常方便。

如果我们在容器上使用了grid-template-areas来定义命名区域，那么单个网格项目就可以通过grid-area属性来直接指定它应该放置在哪个命名区域内。这大大提升了布局的可读性和可维护性，尤其是在复杂布局中。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

除了位置和尺寸，我们还可以控制单个网格项目在其所占据的单元格（或区域）内的对齐方式。justify-self用于水平对齐（start, end, center, stretch），align-self用于垂直对齐。如果想对所有网格项目应用相同的对齐方式，可以在容器上使用justify-items和align-items。

.item-special {
  justify-self: center; /* 在其列内水平居中 */
  align-self: end;     /* 在其行内垂直靠下 */
}

通过这些细粒度的控制，我们可以让网格项目以非线性的方式布局，实现一些传统布局方法难以实现的效果，比如元素重叠、不规则排列等，这无疑为网页设计带来了更多的可能性和创意空间。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~