使用CSS Grid构建复杂水平布局：将嵌套方块结构垂直重排-html教程-PHP中文网

使用CSS Grid构建复杂水平布局：将嵌套方块结构垂直重排

聖光之護

发布： 2025-11-26 13:04:54

原创

902人浏览过

使用CSS Grid构建复杂水平布局：将嵌套方块结构垂直重排

本教程旨在解决如何将一个内部嵌套的垂直方块结构转换为外部水平排列、内部元素垂直堆叠的布局问题。通过详细讲解css grid的强大功能，包括grid-template-columns、grid-template-rows和grid-template-areas等属性，我们将展示如何以更简洁、更语义化的方式实现复杂的二维布局，从而提升代码的可读性和维护性。

在网页开发中，我们经常面临构建复杂布局的挑战，尤其是在需要将多个元素以非传统方式组合时。例如，一个常见的需求是将一个包含大方块和两个小方块的结构，从最初的垂直堆叠（小方块在大方块下方）转换为大方块在左侧，而两个小方块在右侧垂直堆叠的布局。虽然Flexbox在处理一维布局方面表现出色，但在处理这种二维混合布局时，可能会遇到结构嵌套复杂、代码可读性下降的问题。

挑战与传统Flexbox的局限性

最初的实现可能依赖于Flexbox的flex-direction: column属性，将大方块和包含小方块的容器垂直排列。然而，当需求变为将小方块容器移动到大方块的右侧，并且小方块自身需要垂直堆叠时，简单的Flexbox嵌套可能无法直观地实现。这通常需要更深层次的嵌套、额外的包装元素或使用绝对定位，从而增加了CSS的复杂性和维护难度。

CSS Grid：二维布局的强大解决方案

CSS Grid布局模块正是为解决这类二维布局问题而设计的。它允许我们直接在容器上定义行和列，并精确控制每个子元素在网格中的位置和大小。对于本教程中的“方块内方块”结构水平重排的需求，CSS Grid提供了一种优雅且高效的解决方案。

实现步骤与核心概念

我们将通过以下步骤，使用CSS Grid重构该布局。

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

1. 简化HTML结构

首先，我们可以优化HTML结构，使其更扁平化，因为CSS Grid能够直接控制子元素，而无需过多的包装层。

优化后的HTML代码：

<button class="node date-grid">
  <time class='gray'>3</time>
  <div class="next"></div>
  <div class="last"></div>
</button>

登录后复制

在这个结构中，我们将原先的.node和.date-grid合并为一个类，并将time元素和两个小方块（.next和.last）直接作为button的子元素。time元素被赋予了gray类，以便在CSS中更容易地对其进行样式设置和网格定位。

火山写作

字节跳动推出的中英文AI写作、语法纠错、智能润色工具，是一款集成创作、润色、纠错、改写、翻译等能力的中英文 AI 写作助手。

167

查看详情

2. 定义CSS Grid布局

接下来，我们将使用CSS Grid属性来定义容器的网格结构，并精确放置每个子元素。

CSS代码：

.date-grid {
  height: 100px; /* 定义容器高度 */
  display: grid; /* 启用Grid布局 */
  /* 定义列：第一列120px，第二列25px */
  grid-template-columns: 120px 25px;
  /* 定义行：两行等高 */
  grid-template-rows: 1fr 1fr;
  /* 定义网格区域：
     "gray next" 表示第一行，第一列是gray区域，第二列是next区域
     "gray last" 表示第二行，第一列是gray区域，第二列是last区域
  */
  grid-template-areas: "gray next" 
                       "gray last";
  padding: 0;
  border-style: none;
}

.gray {
  grid-area: gray; /* 将此元素放置到名为"gray"的网格区域 */
  display: grid; /* 使其内部内容也能使用Grid布局 */
  place-content: center; /* 垂直和水平居中内容 */
  background: #e9ecef;
}

time {
  font-size: 24px;
}

.next {
  grid-area: next; /* 将此元素放置到名为"next"的网格区域 */
  background: #0060df;
}

.last {
  grid-area: last; /* 将此元素放置到名为"last"的网格区域 */
  background: #d53343;
}

登录后复制

3. 关键CSS Grid属性详解

display: grid;: 这是启用CSS Grid布局的基石。将容器的display属性设置为grid，使其成为一个网格容器，其直接子元素将成为网格项。
grid-template-columns: 此属性用于定义网格的列结构。在本例中，120px 25px表示网格将有两列：第一列宽度固定为120px，第二列宽度固定为25px。这精确地为大方块和两个小方块的侧边预留了空间。
grid-template-rows: 此属性用于定义网格的行结构。1fr 1fr表示网格将有两行，并且这两行将平均分配容器的可用高度。这确保了两个小方块可以垂直堆叠且各占一半高度。fr（fraction）单位是Grid特有的，用于分配剩余空间。
grid-template-areas: 这是一个非常强大的属性，允许我们通过名称来布局网格项。它接收一个字符串列表，每个字符串代表一行。字符串中的每个单词代表一个网格单元格，相同名称的单元格将合并形成一个区域。
- "gray next": 定义了第一行，第一列是gray区域，第二列是next区域。
- "gray last": 定义了第二行，第一列仍然是gray区域，第二列是last区域。通过这种方式，gray区域横跨了两行，而next和last区域则分别占据了第二列的第一行和第二行，实现了垂直堆叠的效果。
grid-area: 这个属性用于将一个网格项分配到由grid-template-areas定义的具名区域。例如，.gray元素被赋予grid-area: gray;，.next被赋予grid-area: next;，以此类推。
place-content: center;: 这是一个简写属性，相当于align-content: center;和justify-content: center;。当应用于一个网格容器（如这里的.gray，它自身也是一个网格容器）时，它会将网格容器内的内容（例如time元素中的数字“3”）在行和列方向上居中。

效果展示：

通过上述CSS Grid的设置，我们成功地将大方块（显示数字“3”）放置在左侧，占据了两行的空间，而两个小方块（.next和.last）则垂直堆叠在大方块的右侧，各占据一行。

注意事项与最佳实践

Grid与Flexbox的选择:
- CSS Grid 最适合用于二维布局，即同时处理行和列的布局。当您需要精确控制元素在整个页面或大型组件中的位置时，Grid是理想选择。
- Flexbox 最适合用于一维布局，即沿单行或单列排列和对齐项目。它在处理组件内部的对齐和分布时非常有效。
- 在实际项目中，两者常常结合使用：Grid用于宏观布局，Flexbox用于微观布局。
语义化HTML: 尽管CSS Grid能够处理复杂的布局，但始终保持HTML结构的语义化和简洁性是非常重要的。避免不必要的div嵌套，让HTML更好地表达内容的结构，而不是仅仅为了布局服务。
响应式设计: CSS Grid在响应式设计方面表现出色。通过媒体查询，您可以轻松地修改grid-template-columns、grid-template-rows和grid-template-areas的值，以适应不同屏幕尺寸下的布局需求。
浏览器兼容性: 现代浏览器对CSS Grid的支持已经非常完善。在旧版浏览器中，可能需要使用Autoprefixer或提供回退方案。

总结

本教程展示了如何利用CSS Grid的强大功能，将一个复杂的“方块内方块”垂直结构优雅地转换为外部水平排列、内部元素垂直堆叠的布局。通过grid-template-columns、grid-template-rows和grid-template-areas等核心属性，我们不仅实现了所需的视觉效果，还显著简化了HTML结构，提高了CSS的可读性和可维护性。掌握CSS Grid将极大地提升您处理复杂Web布局的能力，使您能够构建出更加灵活和响应式的用户界面。

以上就是使用CSS Grid构建复杂水平布局：将嵌套方块结构垂直重排的详细内容，更多请关注php中文网其它相关文章！