来实现不同列具有不同行高、或者单元格跨越不规则数量的行和列时，会变得异常复杂甚至难以实现，且不符合语义化原则。CSS Grid 布局（Grid Layout）是CSS3中引入的一种强大的二维布局系统，它允许开发者将页面划分为行和列，并精确控制每个网格项（grid item）的位置和大小。相比于传统表格，CSS Grid的优势在于：
- 真正的二维布局： 同时控制行和列，实现更复杂的布局结构。
- 灵活性： 网格项可以跨越任意数量的行和列，且可以精确放置在网格的任何位置。
- 内容与表现分离： 布局逻辑完全由CSS控制，HTML结构保持简洁和语义化。
- 响应式设计友好： 结合媒体查询，可以轻松调整不同屏幕尺寸下的布局。
因此，对于实现不规则的块状布局，CSS Grid是远比HTML表格更优的选择。
2. CSS Grid基础概念
要开始使用CSS Grid，首先需要理解几个核心概念：
- 网格容器 (Grid Container)： 应用 display: grid 或 display: inline-grid 的父元素。它定义了网格的整体结构。
- 网格项 (Grid Item)： 网格容器的直接子元素，它们被放置在网格中。
- 网格线 (Grid Lines)： 构成网格的水平和垂直分隔线。
- 网格轨道 (Grid Tracks)： 两条相邻网格线之间的空间，可以是行（row track）或列（column track）。
- 网格单元 (Grid Cell)： 一个网格行轨道和一个网格列轨道的交叉区域，是网格中最小的单位。
- 网格区域 (Grid Area)： 由任意数量的网格单元组成的矩形区域。
常用CSS Grid属性：
- display: grid;: 将元素定义为网格容器。
- grid-template-columns: 定义网格的列结构，可以指定列的宽度。例如 grid-template-columns: 1fr 2fr 1fr; 定义了三列，宽度比例为1:2:1。
- grid-template-rows: 定义网格的行结构，可以指定行的高度。例如 grid-template-rows: repeat(3, 100px); 定义了三行，每行高100px。
- gap: 设置网格行和列之间的间距。row-gap 和 column-gap 分别设置行和列间距。
3. 构建不规则列布局的核心技术
现在，我们将通过一个具体的例子来演示如何利用CSS Grid实现一个具有不同行高和列宽的复杂块状布局。假设我们需要模仿一个包含大小不一、垂直排列的块的布局。
3.1 定义网格结构
首先，我们需要规划网格的整体尺寸。根据设计需求，我们可以设定一个包含10列和15行的网格，其中列宽可以不均，行高可以均分。
.container {
display: grid;
/* 定义10列：2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr。fr单位表示可用空间的分数 */
grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* 定义15行，每行高度均分 */
grid-template-rows: repeat(15, 1fr);
gap: 5px; /* 网格项之间的间距 */
width: 100vw; /* 容器宽度 */
height: 33vw; /* 容器高度，可根据需要调整 */
background: pink; /* 容器背景色，用于可视化 */
/* 设置网格项的自动流向为列方向 */
grid-auto-flow: column;
}解释：
- grid-template-columns: 定义了10列，其中某些列占据了更多的可用空间（例如 2fr）。fr 单位是CSS Grid特有的弹性单位，表示可用空间的一部分。
- grid-template-rows: 使用 repeat(15, 1fr) 定义了15行，每行的高度都均分了容器的可用垂直空间。
- grid-auto-flow: column: 这是实现“不规则列布局”的关键之一。默认情况下，网格项会从左到右、从上到下填充网格（row）。设置为 column 后，网格项会从上到下、从左到右填充网格。
3.2 设置默认网格项跨度
接下来，为网格容器的直接子元素设置默认的跨度。这通常对应于布局中最小的块单元。
.container > div {
background: cyan; /* 默认网格项背景色 */
grid-column: span 1; /* 默认占据1列 */
grid-row: span 3; /* 默认占据3行 */
}解释：
- grid-column: span 1;: 每个 div 默认占据1个列轨道。
- grid-row: span 3;: 每个 div 默认占据3个行轨道。这使得它们在垂直方向上看起来相对较小。
3.3 定义特殊网格项的跨度与样式
布局中往往存在一些尺寸更大的块。我们可以通过 :nth-child 选择器或其他类名来定位这些特殊网格项，并为其设置不同的跨度。
/* 示例中较大的块，占据5行 */
.container > div:nth-child(1),
.container > div:nth-child(2),
.container > div:nth-child(3),
.container > div:nth-child(14),
.container > div:nth-child(15),
.container > div:nth-child(16),
.container > div:nth-child(35),
.container > div:nth-child(36),
.container > div:nth-child(37) {
background: yellow; /* 较大网格项背景色 */
grid-column: span 1; /* 依然占据1列 */
grid-row: span 5; /* 但占据5行，使其看起来更高 */
}解释：
这里我们通过 :nth-child 选择器定位了特定的几个 div 元素，并将它们的 grid-row 跨度设置为 span 5，使其在垂直方向上占据5个行轨道，从而形成较高的块。
3.4 精确放置特定网格项
在 grid-auto-flow: column 的模式下，网格项会按顺序自动填充。但有时我们需要将某些网格项精确地放置在特定位置，以避免自动流填充这些位置，或者实现更复杂的重叠/错位效果。
/* 精确放置第35个网格项 */
.container > div:nth-child(35) {
grid-column: 5 / span 2; /* 从第5条列线开始，跨越2列 */
grid-row: 11 / span 5; /* 从第11条行线开始，跨越5行 */
}
/* 精确放置第36个网格项 */
.container > div:nth-child(36) {
grid-column: 7 / span 2; /* 从第7条列线开始，跨越2列 */
grid-row: 11 / span 5; /* 从第11条行线开始，跨越5行 */
}
/* 精确放置第37个网格项 */
.container > div:nth-child(37) {
grid-column: 9 / span 2; /* 从第9条列线开始，跨越2列 */
grid-row: 11 / span 5; /* 从第11条行线开始，跨越5行 */
}解释：
- grid-column: 5 / span 2;: 表示该网格项从第5条垂直网格线开始，向右跨越2个列轨道。
- grid-row: 11 / span 5;: 表示该网格项从第11条水平网格线开始，向下跨越5个行轨道。
通过这种方式，即使 grid-auto-flow 在工作，这些被精确放置的网格项也会优先占据其指定位置。
4. 完整代码示例
结合上述所有CSS规则和HTML结构，我们可以构建出所需的复杂不规则列布局。
HTML结构
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
</div>
CSS样式
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(15, 1fr);
gap: 5px;
width: 100vw;
height: 33vw; /* 示例高度，可根据实际内容调整 */
background: pink;
grid-auto-flow: column; /* 网格项按列方向自动填充 */
}
.container > div {
background: cyan;
grid-column: span 1; /* 默认占据1列 */
grid-row: span 3; /* 默认占据3行 */
display: flex; /* 使内容居中 */
justify-content: center;
align-items: center;
font-size: 1.5em;
color: white;
}
/* 定义特殊（较大）的网格项，占据5行 */
.container > div:nth-child(1),
.container > div:nth-child(2),
.container > div:nth-child(3),
.container > div:nth-child(14),
.container > div:nth-child(15),
.container > div:nth-child(16),
.container > div:nth-child(35),
.container > div:nth-child(36),
.container > div:nth-child(37) {
background: yellow;
grid-column: span 1; /* 依然占据1列 */
grid-row: span 5; /* 占据5行 */
}
/* 精确放置特定的较大网格项 */
.container > div:nth-child(35) {
grid-column: 5 / span 2; /* 从第5条列线开始，跨越2列 */
grid-row: 11 / span 5; /* 从第11条行线开始，跨越5行 */
}
.container > div:nth-child(36) {
grid-column: 7 / span 2; /* 从第7条列线开始，跨越2列 */
grid-row: 11 / span 5; /* 从第11条行线开始，跨越5行 */
}
.container > div:nth-child(37) {
grid-column: 9 / span 2; /* 从第9条列线开始，跨越2列 */
grid-row: 11 / span 5; /* 从第11条行线开始，跨越5行 */
}5. 注意事项与最佳实践
- 语义化HTML： 即使使用CSS Grid进行布局，也要确保HTML结构本身是语义化的。例如，如果内容是列表，使用
- 响应式设计： 复杂的Grid布局通常需要配合媒体查询（Media Queries）来实现响应式设计。通过在不同屏幕尺寸下调整 grid-template-columns、grid-template-rows 或网格项的 grid-column/grid-row 属性，可以确保布局在各种设备上都能良好显示。
- 浏览器兼容性： 大多数现代浏览器都支持CSS Grid，但对于一些老旧浏览器可能需要添加前缀或提供回退方案。可以使用 caniuse.com 等工具检查兼容性。
- 调试工具： 现代浏览器（如Chrome DevTools、Firefox Developer Tools）提供了强大的CSS Grid调试工具，可以可视化网格线和网格区域，极大地简化了布局调试过程。
- 代码可维护性： 使用清晰的类名和注释来描述网格结构和网格项的用途，以便于团队协作和未来的维护。
6. 总结
通过本教程，我们深入探讨了如何利用CSS Grid布局系统来解决传统HTML表格难以实现的不规则列布局问题。我们学习了如何定义网格容器、设置列和行轨道、控制网格项的默认和特定跨度，以及如何精确放置网格项。CSS Grid以其强大的灵活性和直观的语法，为现代网页布局提供了高效且优雅的解决方案。掌握CSS Grid将极大地提升您在前端开发中处理复杂布局的能力。鼓励读者在此基础上，进一步探索CSS Grid的其他高级功能，如 grid-template-areas、minmax() 函数等，以应对更多样化的布局挑战。
今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~
- 下一篇
- 邮政快递查询APP下载与使用教程
-
- 前端进阶之JavaScript设计模式
-
设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
-
本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
-
如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
-
在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
-
本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
-
- ChatExcel酷表
-
ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。
- 3667次使用
-
- Any绘本
-
探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。
- 3929次使用
-
- 可赞AI
-
可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。
- 3872次使用
-
- 星月写作
-
星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。
- 5040次使用
-
- MagicLight
-
MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。
- 4243次使用
Excel文件转换工具推荐与使用技巧 
