本教程详细演示了如何利用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结构：
原始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 的子元素。
请注意，我们将 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实现灵活的水平布局：方块内嵌方块结构重构指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1599549.html
微信扫一扫 
支付宝扫一扫 
