使用CSS Grid实现灵活的水平布局：方块内嵌方块结构重构指南

本教程详细演示了如何利用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结构

MarsX

AI驱动快速构建App，低代码无代码开发，改变软件开发的游戏规则

159

查看详情

首先，我们可以简化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的强大功能，将一个复杂的垂直内嵌结构优雅地转换为水平布局。这种方法不仅代码更简洁，而且为未来的布局调整和响应式设计提供了更大的灵活性。

以上就是使用CSS Grid实现灵活的水平布局：方块内嵌方块结构重构指南的详细内容，更多请关注php中文网其它相关文章！