本文深入探讨如何利用css grid布局实现传统html表格难以构建的复杂、不规则的网格布局，尤其适用于各列行高不一的视觉效果。通过详细解析css grid的核心属性，如网格定义、项目放置与跨度控制，并提供一个实际的代码示例，指导开发者高效构建动态且响应式的二维布局，从而摆脱对传统表格布局的束缚。
在现代网页设计中，实现具有复杂、不规则排列的块级布局，例如各列行高不一的卡片式展示，传统HTML表格往往显得力不从心且语义不佳。在这种场景下，CSS Grid布局成为了理想的解决方案。CSS Grid提供了一个强大的二维布局系统，允许开发者精确控制元素在行和列上的位置与大小，从而轻松构建出各种复杂的网格结构。
为什么选择CSS Grid而非HTML表格？
传统HTML表格 (
| ) 的高度通常由其内容决定，或通过 rowspan 和 colspan 进行合并，但要实现各列中行高完全不一致且灵活的布局非常困难。 相比之下，CSS Grid专为二维布局而生，它能够轻松定义网格轨道（行和列），并允许网格项跨越任意数量的行和列，实现高度灵活和响应式的设计。 CSS Grid核心概念与属性要构建复杂的网格布局，我们需要理解并运用CSS Grid的几个核心属性： 立即学习“前端免费学习笔记（深入）”；
示例：构建不规则块布局假设我们要创建一个类似瀑布流的复杂布局，其中包含大小不一的块，且它们在垂直方向上呈现出不规则的排列。以下是一个使用CSS Grid实现的示例，它模拟了原问题中提及的“不规则行高”效果。 HTML 结构： 我们首先需要一个网格容器和一系列网格项。
CSS 样式： 关键在于定义网格容器的结构，以及每个网格项如何跨越行和列。 .container {
display: grid; /* 声明为网格容器 */
/* 定义10列，使用fr单位实现弹性宽度。例如，2fr表示占据两份空间 */
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: white;
}
/* 特殊处理：某些网格项占据更多行，例如模拟大块 */
.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;
}代码解析：
注意事项与总结 |
