使用CSS Grid实现嵌套结构的水平布局转换-html教程-PHP中文网

使用CSS Grid实现嵌套结构的水平布局转换

碧海醫心

发布： 2025-11-30 08:15:11

原创

618人浏览过

使用CSS Grid实现嵌套结构的水平布局转换

本教程详细讲解如何利用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）的垂直/水平组合布局，转换为一个二维的、更复杂的网格布局。

360 AI助手

360公司推出的AI聊天机器人聚合平台，集合了国内15家顶尖的AI大模型。

140

查看详情

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将极大地提升您构建现代网页布局的效率和灵活性。

以上就是使用CSS Grid实现嵌套结构的水平布局转换的详细内容，更多请关注php中文网其它相关文章！