利用CSS Grid实现复杂嵌套结构水平重排-html教程-PHP中文网

利用css grid实现复杂嵌套结构水平重排

本文详细介绍了如何将一个包含主方块和两个底部小方块的嵌套结构，通过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结构：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

首先，我们可以简化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元素分配到之前定义的命名区域中。
- 被分配到gray区域，因此它占据了左侧的两行。
- 被分配到next区域，占据了右上角。
- 被分配到last区域，占据了右下角。
- place-content: center;: 在.gray元素内部，我们再次使用了display: grid;并配合place-content: center;，这是一种简写形式，等同于align-content: center;和justify-content: center;，用于将其内容（数字“3”）在自身内部垂直和水平居中。

利用CSS Grid实现复杂嵌套结构水平重排

初始布局与Flexbox的局限性

利用CSS Grid实现水平重排

总结与注意事项