本文详细介绍了如何将一个包含主方块和两个底部小方块的嵌套结构，通过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这个额外的包装器。
<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”）在自身内部垂直和水平居中。
总结与注意事项
通过CSS Grid，我们成功地将原始的垂直嵌套结构重排为水平排列，并且两个小方块实现了垂直堆叠，同时保持了清晰、易读的CSS代码。
CSS Grid的优势：
- 二维布局控制： CSS Grid天生为二维布局设计，能够同时控制行和列，对于复杂的网格系统具有无与伦比的优势。
- 语义化的布局： grid-template-areas允许我们用易于理解的名称来定义布局区域，使得CSS代码更具可读性和可维护性。
- 简化HTML结构： 许多情况下，Grid布局可以减少不必要的包装器元素，使HTML更加简洁。
- 响应式设计： 结合媒体查询，Grid布局能够非常灵活地调整网格结构，适应不同屏幕尺寸。
何时选择Flexbox与Grid？
- Flexbox（一维布局）： 当你需要沿着一个方向（行或列）排列一组项目时，Flexbox是理想选择。例如，导航菜单、表单输入组、卡片列表等。
- Grid（二维布局）： 当你需要同时控制行和列，构建复杂的网格系统时，Grid是最佳方案。例如，整个页面布局、仪表盘、图片画廊等。
在实际开发中，Flexbox和Grid并非互斥，它们可以很好地结合使用。例如，一个Grid容器可以包含Flex项目，反之亦然，以实现更精细的布局控制。理解两者的核心区别和适用场景，将有助于我们编写出更健壮、更易于维护的CSS布局代码。
