CSS如何创建网格布局_grid_template配置

grid-template 是css grid布局的核心复合属性，它通过一行代码同时定义网格的行、列结构和命名区域。1. 使用时需先设置容器为 display: grid 或 inline-grid；2. 它是 grid-template-rows、grid-template-columns 和 grid-template-areas 的简写形式；3. 语法上，/ 前定义行结构与区域名称，/ 后定义列结构；4. 支持 fr 单位实现弹性空间分配，minmax() 函数设定轨道尺寸范围，从而提升响应式设计能力；5. 可结合媒体查询实现不同屏幕尺寸下的布局切换，极大增强了布局的灵活性与可维护性。

grid-template 是CSS Grid布局里一个非常核心且功能强大的复合属性。它允许你在一行代码里同时定义网格的行（rows）、列（columns）结构以及命名区域（areas）。简单来说，它就像一个总设计师，一次性把整个页面的骨架和区域划分都确定下来，让布局变得异常直观和可读，远比我们以前用浮动或者flexbox来做复杂布局要省心得多。

解决方案： 要创建网格布局并配置 grid-template，你首先需要将容器元素设置为 display: grid 或 display: inline-grid。接着，就可以使用 grid-template 属性来定义网格的结构了。

grid-template 实际上是 grid-template-rows、grid-template-columns 和 grid-template-areas 这三个属性的简写。它的语法结构大致是这样的：

.container {
  display: grid;
  grid-template:
    [row1-start] "header header header" 100px [row1-end]
    [row2-start] "nav main aside" auto [row2-end]
    [row3-start] "footer footer footer" 50px [row3-end]
    / 1fr 2fr 1fr; /* 这里的 / 后面是列定义 */
}

让我来拆解一下这个例子，我个人觉得这样写是把 grid-template 的威力展现得淋漓尽致：

立即学习“前端免费学习笔记（深入）”；

1. 行定义与区域命名： 在 / 符号之前的部分，每一对双引号代表一行，里面的字符串是该行中各个单元格对应的区域名称。比如 "header header header" 意味着这一行有三个单元格，它们都属于 header 区域。你可以用 . 来表示一个空的单元格。 行的高度（如 100px, auto, 50px）紧随其后。 方括号 [row1-start] 是可选的行线名称，方便后续定位。

   

2. 列定义：/ 符号之后的部分定义了网格的列结构。比如 1fr 2fr 1fr 定义了三列，宽度比例为 1:2:1。这里可以使用各种长度单位（px, em, rem, %），也可以使用 fr 单位（fractional unit，表示可用空间的一份），minmax() 函数，甚至 repeat() 函数。

示例：一个经典的页面布局

<div class="grid-container">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Main Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

.grid-container {
  display: grid;
  /*
   * 定义三行：header行高100px，main行自适应，footer行高50px
   * 定义三列：左侧导航1份，中间主内容2份，右侧边栏1份
   * 并为每个区域命名
   */
  grid-template:
    "header header header" 100px
    "nav    main   aside" auto
    "footer footer footer" 50px
    / 1fr 2fr 1fr; /* 列的定义 */

  gap: 10px; /* 网格间距 */
  height: 100vh; /* 方便看效果 */
}

/* 将子元素放置到对应的命名区域 */
header { grid-area: header; background-color: #f0f0f0; padding: 10px; }
nav { grid-area: nav; background-color: #e0e0e0; padding: 10px; }
main { grid-area: main; background-color: #d0d0d0; padding: 10px; }
aside { grid-area: aside; background-color: #c0c0c0; padding: 10px; }
footer { grid-area: footer; background-color: #b0b0b0; padding: 10px; }

通过这种方式，整个页面的宏观布局一眼就能看明白，维护起来也方便很多。我个人在做响应式布局时，经常会结合媒体查询来调整 grid-template 的值，简直是神器。

grid-template 中 fr 单位和 minmax() 函数如何提升布局弹性？

在我看来，fr 单位和 minmax() 函数是 grid-template 乃至整个CSS Grid布局中最具革命性的特性之一，它们直接解决了传统布局中弹性与固定尺寸难以兼顾的痛点。

fr (fractional unit) 代表“一份”可用空间。它的强大之处在于，它会自动计算并分配容器内剩余的空间。举个例子，如果你有三列，定义为 1fr 2fr 1fr，这意味着第一列和第三列各占一份可用空间，而第二列则占据两份。如果总共有 4 份，那么第二列就会是总宽度的 50%。这比百分比灵活得多，因为它是在扣除固定尺寸元素（比如 px 单位的侧边栏）后，再来分配剩余空间。我经常用它来做主内容区域的自适应宽度，简直是省心。

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

38

查看详情

而 minmax(min, max) 函数则更进一步，它允许你为网格轨道（行或列）设置一个尺寸范围。这意味着你可以说：“这个列的宽度最小是 200px，最大是 1fr。” 当可用空间不足 200px 时，它会保持 200px（可能出现溢出）；当空间充足时，它会按 1fr 的比例进行分配。这种弹性与限制的结合，对于创建真正健壮和响应式的布局至关重要。

想象一下，你有一个侧边栏，你希望它最小宽度是 250px，但如果屏幕足够宽，它也可以扩展到占据总宽度的 0.25fr。这时你就可以写 minmax(250px, 0.25fr)。这种能力让我觉得在处理不同屏幕尺寸时的布局策略变得异常清晰和直接，不再需要复杂的JS计算或者嵌套多层flexbox来模拟。

grid-template 与 grid-template-areas 有何关联？

实际上，grid-template-areas 是 grid-template 这个大属性里的一部分，或者说，grid-template 包含了 grid-template-areas 的功能。当我第一次接触到 grid-template 的时候，我发现它把行、列的定义和区域的命名巧妙地融合在了一起，这种做法简直是天才。

grid-template-areas 单独使用时，你需要先用 grid-template-rows 和 grid-template-columns 定义好网格结构，然后才能用 grid-template-areas 来放置元素。例如：

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

而 grid-template 的美妙之处在于，它把这些都整合到了一起。你可以在定义行和列的同时，直接用字符串字面量来“画”出你的布局区域。这就好像你拿着笔在纸上画草图一样，非常直观。

.container {
  display: grid;
  grid-template:
    "header header header" 100px /* 定义第一行是header区域，高100px */
    "nav main aside" auto         /* 定义第二行是nav, main, aside区域，高自适应 */
    "footer footer footer" 50px   /* 定义第三行是footer区域，高50px */
    / 1fr 2fr 1fr;                /* 最后定义三列的宽度比例 */
}

这种集成方式，在我看来，大大提升了代码的可读性和维护性。当你需要调整布局时，你只需要看 grid-template 这一行或这几行代码，就能清晰地看到整个页面的骨架是如何组织的。特别是当布局比较复杂时，这种视觉化的定义方式能有效避免出错，并且让团队成员之间更容易理解布局意图。它把布局的“意图”和“实现”融合得非常好。

在实际项目中，grid-template 还有哪些高级用法或注意事项？

在实际项目里，grid-template 的应用远不止基础布局那么简单。我发现它的一些“高级”用法或者说一些需要注意的细节，能让你的布局更加灵活和健壮。

一个很常见的场景是响应式设计。虽然前面提到了用媒体查询改变 grid-template 的值，但更进一步，你可以利用它来彻底改变不同屏幕尺寸下的布局结构。比如，在桌面端可能是三列布局，到了移动端，你可能想让它们变成单列堆叠，这时只需要在媒体查询里重写 grid-template 即可：

/* 桌面端 */
.grid-container {
  grid-template:

以上就是CSS如何创建网格布局_grid_template配置的详细内容，更多请关注php中文网其它相关文章！