本教程详细讲解如何利用css grid将一个基于flexbox构建的垂直嵌套布局转换为一个更复杂的水平布局。通过定义网格列、行和区域，我们将展示如何将一个大方块与一组垂直堆叠的小方块并排显示，从而实现灵活且响应式的二维布局控制。
1. 原始布局与问题分析
我们首先来看一个常见的UI结构，它包含一个主区域（例如显示日期）和下方两个辅助区域（例如表示状态）。原始设计使用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 样式：
.date-grid {
width: 120px;
height: 100px;
display: flex;
flex-direction: column; /* 主容器垂直排列 */
}
.node {
width: 100%;
height: 100%;
background: #e9ecef; /* 初始背景色，会被time和smallHolder覆盖 */
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; } 这个布局会呈现一个垂直堆叠的效果：上方是一个较大的数字“3”，下方是两个并排的“next”和“last”小方块。
立即学习“前端免费学习笔记（深入）”；
期望的布局目标是将这个结构进行水平转换：大的数字“3”位于左侧，而“next”和“last”小方块则垂直堆叠在右侧。这要求我们将一个一维（Flexbox）的垂直/水平组合布局，转换为一个二维的、更复杂的网格布局。
2. 使用CSS Grid实现目标布局
CSS Grid是处理二维布局的强大工具，非常适合实现这种复杂的网格结构。我们将通过定义网格的行、列以及区域来精确控制元素的放置。
核心思路：
- 将.date-grid设置为Grid容器。
- 定义两列：一列用于主内容（数字“3”），另一列用于两个小方块。
- 定义两行：小方块将分别占据这两行。
- 利用grid-template-areas为每个区域命名，并将其分配给相应的元素，实现精确布局。
HTML 结构调整： 为了更好地利用Grid的grid-area特性，我们需要稍微调整HTML结构，将time和两个小方块直接作为.date-grid的子元素。同时，我们将.node类直接应用到.date-grid上，因为它现在是整个可点击区域的容器。
<button class="node date-grid"> <time class='gray'>3</time> <div class="next"></div> <div class="last"></div> </button>
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
* 这意味着gray会横跨两行。
*/
grid-template-areas: "gray next" "gray last";
padding: 0;
border-style: none; /* 移除边框 */
}
.gray {
grid-area: gray; /* 将此元素放置在名为gray的区域 */
display: grid;
place-content: center; /* 使内容（数字3）在区域内居中 */
background: #e9ecef;
}
time {
font-size: 24px;
/* time元素现在是.gray的子元素，其布局由.gray控制 */
}
.next {
grid-area: next; /* 将此元素放置在名为next的区域 */
background: #0060df;
}
.last {
grid-area: last; /* 将此元素放置在名为last的区域 */
background: #d53343;
}通过上述CSS Grid的定义，我们成功创建了一个两列两行的网格。time元素（带有gray类）被分配到名为gray的区域，该区域在grid-template-areas中占据了第一列的两行。next和last元素则分别被分配到第二列的第一行和第二行。这样就实现了大方块在左，小方块垂直堆叠在右的布局效果。
3. 注意事项与最佳实践
-
Flexbox与Grid的选择：
- Flexbox 适用于一维布局（行或列），当你需要沿着一个轴线（主轴）对齐或分布项目时，Flexbox是理想选择。
- CSS Grid 适用于二维布局，当你需要同时控制行和列，或者创建复杂的网格结构时，Grid是更好的选择。
- 在这个案例中，由于需要同时控制水平和垂直方向上的多个独立区域，Grid的优势显而易见。
- 语义化HTML： 尽管为了Grid布局调整了HTML结构，但将button作为整个交互区域的容器是符合语义的。内部的time和div作为其内容。
- grid-template-areas的强大： 这种方式不仅让布局代码更具可读性，也使得调整布局变得异常简单，只需修改grid-template-areas的字符串即可。
- 响应式设计： CSS Grid天生就对响应式设计非常友好。你可以使用媒体查询（Media Queries）轻松修改grid-template-columns、grid-template-rows甚至grid-template-areas，以适应不同屏幕尺寸。
4. 总结
本教程展示了如何从一个基于Flexbox的垂直嵌套布局出发，利用CSS Grid的强大功能，将其转换为一个具有大方块在左、小方块垂直堆叠在右的复杂水平布局。通过display: grid、grid-template-columns、grid-template-rows和grid-template-areas等属性，我们能够以声明式的方式精确控制元素的二维位置和大小。掌握CSS Grid将极大地提升您构建现代网页布局的效率和灵活性。
