利用CSS Grid实现复杂嵌套结构水平重排-html教程-PHP中文网

利用CSS Grid实现复杂嵌套结构水平重排

碧海醫心

发布： 2025-12-01 08:03:15

原创

533人浏览过

利用css grid实现复杂嵌套结构水平重排

本文详细介绍了如何将一个包含主方块和两个底部小方块的嵌套结构，通过CSS Grid布局实现水平重排，使小方块垂直堆叠在主方块的旁边。教程对比了Flexbox在处理此类二维布局时的局限性，并深入讲解了CSS Grid的`grid-template-columns`、`grid-template-rows`和`grid-template-areas`等核心属性，提供清晰的代码示例，旨在帮助开发者更高效、灵活地构建复杂的网页布局。

在网页开发中，我们经常需要构建包含复杂嵌套元素的布局。当需要将这些嵌套元素从一种排列方式（例如垂直堆叠）转换为另一种排列方式（例如水平并列，同时保持内部结构），传统的Flexbox布局有时会显得力不从心，或者需要引入额外的包装器和复杂的CSS规则。本教程将通过一个具体的“方块内嵌方块”结构重排案例，展示CSS Grid如何优雅且高效地解决此类二维布局问题。

初始布局与Flexbox的局限性

假设我们有一个“日期网格”组件，其中包含一个较大的主内容区域（显示日期）和下方两个较小的辅助区域。最初的设计目标是让这两个小区域水平排列在主区域下方，整个组件垂直堆叠。

原始HTML结构：

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

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

登录后复制

原始CSS样式（Flexbox实现）：

.date-grid {
    width: 120px;
    height: 100px;
    display: flex;
    flex-direction: column; /* 整体垂直堆叠 */
}

.node {
    width: 100%;
    height: 100%;
    background: #e9ecef;
    border: none;
    padding: 0;
}

time {
    display: block;
    height: 75%;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 日期垂直居中 */
}

.smallHolder {
    width: 100%;
    height: 25%;
    display: flex; /* 小方块水平排列 */
}

.smallHolder>div {
    width: 25%;
    height: 100%;
    flex-shrink: 0;
    flex-grow: 1;
}

.next { background: #0060df; }  
.last { background: #d53343; }

登录后复制

在这个结构中，.date-grid和time都使用了flex-direction: column，而.smallHolder则使用了flex-direction: row（默认值），以实现内部小方块的水平排列。如果我们的需求是让整个组件水平排列，且两个小方块垂直堆叠在主方块的旁边，使用Flexbox可能需要重新思考整个嵌套结构，或者引入复杂的负外边距、绝对定位等，这将增加代码的复杂性和维护难度。

利用CSS Grid实现水平重排

CSS Grid是为二维布局而生，它允许我们同时控制行和列，非常适合处理这种复杂的对齐和排列需求。通过CSS Grid，我们可以将上述结构优雅地重排为：一个主方块占据左侧，两个小方块垂直堆叠在主方块的右侧。

优化后的HTML结构：

首先，我们可以简化HTML结构，将所有直接参与布局的元素作为Grid容器的直系子元素。这样，Grid容器可以直接控制它们的位置。我们将.node和.date-grid合并，并移除smallHolder这个额外的包装器。

Poe

Quora旗下的对话机器人聚合工具

607

查看详情

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

登录后复制

这里我们将time元素添加了一个gray类，以便在CSS Grid中对其进行样式和区域分配。

CSS Grid布局实现：

现在，我们使用CSS Grid来定义布局。关键在于使用grid-template-columns、grid-template-rows和grid-template-areas。

.date-grid {
  height: 100px; /* 保持总高度 */
  display: grid; /* 启用Grid布局 */
  /* 定义列：第一列120px给主方块，第二列25px给小方块 */
  grid-template-columns: 120px 25px; 
  /* 定义行：两行，各占剩余高度的1fr，用于小方块 */
  grid-template-rows: 1fr 1fr; 
  /* 定义命名区域：
     第一行：左侧是'gray'，右侧是'next'
     第二行：左侧是'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;
}

登录后复制

代码解析：

display: grid;: 将.date-grid容器声明为Grid容器。
grid-template-columns: 120px 25px;: 定义了两列。第一列宽度为120px，用于主方块；第二列宽度为25px，用于两个小方块。
grid-template-rows: 1fr 1fr;: 定义了两行。1fr表示“剩余空间的一等份”，因此这两行将平分容器的可用高度，非常适合垂直堆叠的两个小方块。
grid-template-areas: "gray next" "gray last";: 这是实现复杂布局的关键。它定义了一个可视化网格，并为每个单元格分配了命名区域。
- 第一行定义了两个区域：gray和next。
- 第二行定义了两个区域：gray和last。
- 注意gray区域跨越了两行，这意味着任何被指定为grid-area: gray;的元素都将占据这两行。
grid-area: gray;, grid-area: next;, grid-area: last;: 这些属性将HTML元素分配到之前定义的命名区域中。
- <time class='gray'>被分配到gray区域，因此它占据了左侧的两行。
- <div class="next">被分配到next区域，占据了右上角。
- <div class="last">被分配到last区域，占据了右下角。
place-content: center;: 在.gray元素内部，我们再次使用了display: grid;并配合place-content: center;，这是一种简写形式，等同于align-content: center;和justify-content: center;，用于将其内容（数字“3”）在自身内部垂直和水平居中。