本教程将深入探讨如何利用css grid布局实现传统html表格难以构建的复杂、不规则的网格结构，例如各列行高不一的布局。我们将详细介绍css grid的核心概念，包括网格容器、网格项、行列定义、自动流向以及精确的元素定位与跨度控制，并通过一个具体示例，指导您构建出高度灵活且响应式的页面布局，避免滥用表格进行非数据展示的布局设计。
理解传统表格的局限性与CSS Grid的优势
在网页布局设计中，尤其当需要创建类似砖石瀑布流或各列行高不一的复杂结构时，许多初学者可能会尝试使用HTML的<table>元素。然而，<table>元素的主要设计目的是展示二维表格数据，其结构 rigid（刚性）且语义上不适合非数据展示的布局。当尝试用表格实现视觉上的“不规则行高”时，往往会导致复杂的嵌套、冗余的HTML代码以及难以维护的CSS样式。
CSS Grid布局（CSS网格布局）是CSS3中引入的一种强大的二维布局系统，它允许开发者将页面内容划分为行和列，并能精确控制每个网格项（grid item）的位置和大小，甚至可以使其跨越多个行或列。相较于传统表格或Flexbox（一维布局），CSS Grid在处理复杂、非线性的布局时展现出无与伦比的灵活性和强大功能。
CSS Grid核心概念解析
要实现复杂的不规则布局，我们需要掌握CSS Grid的几个核心属性：
- display: grid: 将一个HTML元素定义为网格容器（Grid Container），其直接子元素将成为网格项（Grid Item）。
- grid-template-columns: 定义网格的列结构。可以指定列的数量、宽度，支持多种单位（如px, em, rem, %, fr等）。fr单位表示可用空间的分数，非常适合创建弹性列。
- grid-template-rows: 定义网格的行结构。与grid-template-columns类似，用于指定行的数量和高度。
- gap (或 grid-gap): 定义网格线之间的间距，可以同时设置行间距和列间距。
- grid-auto-flow: 控制网格项的自动放置方向。默认值为row，即按行填充；设置为column则按列填充。这在创建瀑布流或多列布局时非常关键。
-
grid-column / grid-row: 用于定位或设置网格项跨越的列/行。
- grid-column: start / end：定义网格项从哪条列线开始，到哪条列线结束。
- grid-column: span N：定义网格项跨越N个列。
- grid-row: start / end 或 grid-row: span N：与grid-column类似，用于行。
实践：构建不规则的砖石布局
假设我们希望创建一个类似砖石瀑布流的布局，其中包含大小不一的元素，并且它们按列填充。
立即学习“前端免费学习笔记（深入）”；
HTML 结构
首先，我们需要一个网格容器和一系列网格项。网格项可以是简单的div元素。
<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 样式
接下来，我们为容器和网格项定义样式。我们将模拟一个具有15行和10列的网格，其中一些大项占据5行高，小项占据3行高。为了实现按列填充，我们将使用grid-auto-flow: column。
.container {
display: grid;
/* 定义10列：2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr
这意味着第一列和第四列是其他列宽度的两倍，其余列等宽。 */
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;
}
/* 所有网格项的默认样式 */
.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: #333;
}
/* 特定网格项（例如，较大的“砖块”）的样式，使其跨越5行 */
/* 这里通过nth-child选择器选取特定的网格项，使其显示为较大尺寸 */
.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行，使其更高 */
}
/* 精确定位特定的几个大项，以防止其他自动流动的项占据它们的位置 */
/* 第35个网格项：从第5列线开始，跨越2列；从第11行线开始，跨越5行 */
.container > div:nth-child(35) {
grid-column: 5 / span 2;
grid-row: 11 / span 5;
}
/* 第36个网格项：从第7列线开始，跨越2列；从第11行线开始，跨越5行 */
.container > div:nth-child(36) {
grid-column: 7 / span 2;
grid-row: 11 / span 5;
}
/* 第37个网格项：从第9列线开始，跨越2列；从第11行线开始，跨越5行 */
.container > div:nth-child(37) {
grid-column: 9 / span 2;
grid-row: 11 / span 5;
}代码解析
-
容器设置:
- display: grid;: 激活网格布局。
- grid-template-columns: 2fr 1fr ...;: 定义了10列，其中某些列的宽度是其他列的两倍，实现了列宽的不均匀分布。fr单位确保了列的弹性伸缩。
- grid-template-rows: repeat(15, 1fr);: 定义了15行，每行高度相等，并会根据内容和容器高度自动调整。
- gap: 5px;: 设置网格单元之间的间距。
- grid-auto-flow: column;: 这是实现“按列填充”的关键。如果没有这个属性，网格项会默认按行从左到右填充。
-
默认网格项样式:
- .container > div: 所有的网格项默认占据1列和3行。这是大多数“小砖块”的基础尺寸。
-
特殊网格项样式:
- 通过:nth-child()选择器，我们选取了特定的网格项（例如第1、2、3个，以及第14、15、16个等），并将它们的grid-row设置为span 5，使它们的高度变为默认项的5/3倍，从而创建出高矮不一的视觉效果。
-
精确位置与跨度:
- 对于最后三个特殊的网格项（第35、36、37个），我们不仅指定了它们的高度（grid-row: span 5），还使用grid-column: start / span N和grid-row: start / span N精确地定义了它们在网格中的起始位置和跨度。例如，grid-column: 5 / span 2表示从第5条列线开始，向右跨越2个列单元。这种精确控制对于固定某些重要元素的位置，防止自动流动的其他元素覆盖它们至关重要。
注意事项与最佳实践
- 语义化: 始终优先考虑HTML的语义化。只有当数据确实是表格形式时才使用<table>。对于布局，CSS Grid是更优的选择。
- 规划网格: 在开始编码前，最好在纸上或设计工具中规划好您的网格结构，包括行列数量、尺寸比例以及特殊元素的定位。
- fr 单位: 善用fr单位，它能让您的网格在不同屏幕尺寸下保持良好的弹性。
- repeat() 函数: repeat()函数是定义重复行或列模式的强大工具，能有效简化CSS代码。
- grid-auto-flow: 理解并灵活运用grid-auto-flow属性，它能极大地影响网格项的排列方式。
- 调试工具: 现代浏览器（如Chrome, Firefox）都提供了强大的CSS Grid调试工具，可以可视化网格线和网格项，帮助您快速定位和解决布局问题。
- 响应式设计: CSS Grid与媒体查询结合使用，可以轻松实现复杂的响应式布局，根据屏幕大小调整网格的列数、行数或网格项的跨度。
总结
通过本教程，您应该已经掌握了如何使用CSS Grid来创建传统HTML表格难以实现的复杂、不规则布局。CSS Grid的强大之处在于其二维布局能力、灵活的尺寸单位、精确的定位控制以及对自动放置流向的干预。抛弃为布局而滥用<table>的旧习惯，拥抱CSS Grid，您将能够构建出更优雅、更灵活且易于维护的现代网页布局。
