来实现不同列具有不同行高、或者单元格跨越不规则数量的行和列时，会变得异常复杂甚至难以实现，且不符合语义化原则。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 设置默认网格项跨度
接下来，为网格容器的直接子元素设置默认的跨度。这通常对应于布局中最小的块单元。
Pinokio
Pinokio是一款开源的AI浏览器，可以安装运行各种AI模型和应用
232
查看详情
.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() 函数等，以应对更多样化的布局挑战。
技术