本教程详细演示了如何利用css grid将一个原有的、基于flexbox的垂直“方块内嵌方块”结构转换为水平布局。通过介绍`grid-template-columns`、`grid-template-rows`和`grid-template-areas`等核心grid属性，文章提供了一种高效且语义化的解决方案，以实现主内容区位于左侧，两个小区域垂直堆叠在右侧的复杂二维布局。
1. 布局挑战：从垂直到水平的结构转换
在网页设计中，我们经常需要构建包含复杂嵌套元素的布局。一个常见的场景是，一个主内容区域旁边伴随着多个辅助区域。本教程将以一个具体的“方块内嵌方块”结构为例，演示如何将其从最初的垂直排列方式，转换为一种主内容区在左，两个小辅助区域垂直堆叠在右的水平布局。
原始结构描述： 一个名为 .date-grid 的容器包含一个 .node 按钮。这个按钮内部有一个 time 元素（作为主内容区）和一个 .smallHolder 容器。.smallHolder 容器又包含两个小的 div 元素（.next 和 .last），它们水平并排排列。整个 .date-grid 采用 flex-direction: column，使得 time 元素在上方，.smallHolder 在下方。
原始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样式（关键部分）：
立即学习“前端免费学习笔记（深入）”；
.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; } 这种基于Flexbox的实现对于一维（行或列）布局非常有效。然而，当我们需要同时控制行和列，并进行更复杂的二维布局时，Flexbox的嵌套和调整可能会变得复杂。
2. 引入CSS Grid：二维布局的利器
为了实现主内容区在左侧，两个小辅助区域垂直堆叠在右侧的水平布局，CSS Grid是更优的选择。CSS Grid专为二维布局设计，能够同时管理行和列，并提供强大的区域命名功能，使布局结构清晰易懂。
2.1 重新设计HTML结构
首先，我们可以简化HTML结构，将所有直接参与Grid布局的元素作为 .date-grid 的直接子元素，或者通过类名进行标识。在这里，我们将 time、.next 和 .last 直接作为 button.node.date-grid 的子元素。
<button class="node date-grid"> <time class='gray'>3</time> <div class="next"></div> <div class="last"></div> </button>
请注意，我们将 time 元素添加了 gray 类，以便在CSS Grid中对其进行样式和定位。
2.2 CSS Grid布局实现
接下来，我们将使用CSS Grid属性来定义新的布局：
.date-grid {
height: 100px; /* 容器高度保持不变 */
display: grid; /* 启用CSS Grid布局 */
/* 定义列：第一列120px，第二列25px */
grid-template-columns: 120px 25px;
/* 定义行：两行等高 */
grid-template-rows: 1fr 1fr;
/* 定义网格区域，实现语义化布局 */
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;
}关键CSS Grid属性解析：
- display: grid;: 将容器设置为一个网格容器，其直接子元素将成为网格项。
- grid-template-columns: 120px 25px;: 定义了两列。第一列的宽度固定为 120px，用于主内容区；第二列的宽度固定为 25px，用于两个小辅助区域。
- grid-template-rows: 1fr 1fr;: 定义了两行。1fr 表示“一个分数单位”，这意味着这两行将等分容器的可用高度。这样，.next 和 .last 可以各占据一半的高度。
- grid-template-areas: "gray next" "gray last";: 这是Grid布局中非常强大且直观的特性。它允许我们通过命名来定义网格区域，并直观地“绘制”出布局结构。
- "gray next" 表示第一行：第一列是 gray 区域，第二列是 next 区域。
- "gray last" 表示第二行：第一列是 gray 区域，第二列是 last 区域。
- 从这个定义可以看出，gray 区域横跨了两行，占据了第一列的全部空间。next 区域占据了第二列的第一行，last 区域占据了第二列的第二行。
- grid-area: gray; / grid-area: next; / grid-area: last;: 将相应的HTML元素分配到之前定义的具名网格区域中。
- place-content: center;: 这是一个简写属性，等同于 align-content: center; 和 justify-content: center;。在这里，它用于将 time 元素（作为 gray 区域的内容）在其网格单元内部水平和垂直居中。
3. 注意事项与总结
- Flexbox与Grid的选择： Flexbox主要用于一维布局（行或列），适合组件内部的排列。CSS Grid则专为二维布局设计，能够同时控制行和列，更适合页面整体布局或复杂组件的结构。在需要同时管理行和列的场景下，Grid通常能提供更简洁、更强大的解决方案。
- 语义化布局： grid-template-areas 提供了一种高度语义化的方式来定义布局，使得CSS代码更易读、更易维护。通过区域命名，我们可以一目了然地看出每个元素在布局中的位置和作用。
- 结构简化： 采用CSS Grid后，我们能够简化HTML结构。原有的 .smallHolder 容器不再需要，因为Grid可以直接管理其子元素的二维位置。
- 响应式设计： CSS Grid与媒体查询结合，可以非常方便地实现复杂的响应式布局。通过改变 grid-template-columns、grid-template-rows 和 grid-template-areas 的值，可以轻松调整不同屏幕尺寸下的布局。
- 浏览器兼容性： 现代浏览器对CSS Grid的支持已经非常完善。在需要支持旧版浏览器的项目中，可能需要考虑Polyfill或备用方案。
通过本教程，我们学习了如何利用CSS Grid的强大功能，将一个复杂的垂直内嵌结构优雅地转换为水平布局。这种方法不仅代码更简洁，而且为未来的布局调整和响应式设计提供了更大的灵活性。
