CSS Grid实现复杂不规则布局：告别传统表格限制

相比之下，CSS Grid专为二维布局而生，它能够轻松定义网格轨道（行和列），并允许网格项跨越任意数量的行和列，实现高度灵活和响应式的设计。

CSS Grid核心概念与属性

要构建复杂的网格布局，我们需要理解并运用CSS Grid的几个核心属性：

立即学习“前端免费学习笔记（深入）”；

1. display: grid: 将一个元素定义为网格容器。
2. grid-template-columns 和 grid-template-rows: 定义网格的列和行。你可以使用固定值（px, em, rem）、百分比（%）或弹性单位（fr）。fr 单位代表网格容器中可用空间的一等份，非常适合创建自适应布局。
3. gap (或 grid-row-gap, grid-column-gap): 设置网格项之间的间距。
4. grid-auto-flow: 控制自动放置的网格项的流动方向。默认是 row（先行后列），设置为 column 则表示先列后行。
5. grid-column 和 grid-row: 用于定位网格项。
   • grid-column: start-line / end-line; 或 grid-column: start-line / span count;
   • grid-row: start-line / end-line; 或 grid-row: start-line / span count;
   • span count 表示网格项将跨越多少个网格轨道。

示例：构建不规则块布局

假设我们要创建一个类似瀑布流的复杂布局，其中包含大小不一的块，且它们在垂直方向上呈现出不规则的排列。以下是一个使用CSS Grid实现的示例，它模拟了原问题中提及的“不规则行高”效果。

HTML 结构：

ONLYOFFICE

用ONLYOFFICE管理你的网络私人办公室

下载

我们首先需要一个网格容器和一系列网格项。

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37

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;
}

代码解析：

1. 容器设置 (.container):
   • display: grid; 激活网格布局。
   • grid-template-columns: 2fr 1fr ...; 定义了10列，其中某些列的宽度是其他列的两倍，实现了列宽的不均匀分布。
   • grid-template-rows: repeat(15, 1fr); 定义了15行，每行高度相等，为网格项提供了细粒度的垂直定位基础。
   • grid-auto-flow: column; 是实现“先列后行”填充的关键。如果没有这个属性，网格项会默认按行填充。
2. 默认网格项 (.container > div):
   • grid-column: span 1; 和 grid-row: span 3; 设置了大多数网格项默认占据1列和3行。
3. 特殊大块 (:nth-child(...)):
   • 通过 :nth-child 选择器，我们为特定的网格项（例如第1、2、3、14、15、16、35、36、37个）设置了不同的 grid-row: span 5;，使其占据5行，从而创建了视觉上的“大块”效果，实现了各列行高不一的布局。
4. 精确位置 (:nth-child(35), 36, 37):
   • 对于最后几个特别大的块，为了确保它们在特定位置，我们使用了 grid-column: start / span count; 和 grid-row: start / span count; 进行精确放置。这可以覆盖 grid-auto-flow 的自动放置行为，确保重要元素处于期望的位置。例如，.container > div:nth-child(35) 从第5列开始，跨越2列，并从第11行开始，跨越5行。

注意事项与总结

• 规划网格： 在开始编码之前，最好在草图上规划好你的网格结构，包括有多少行、多少列，以及每个网格项将占据多少空间。
• fr 单位的优势： fr 单位使得网格布局在不同屏幕尺寸下具有天然的弹性，非常适合响应式设计。
• grid-auto-flow 的灵活运用： 理解 row 和 column 模式下的自动放置行为，结合 span 和精确放置可以实现复杂的布局。
• 语义化： 始终优先考虑HTML的语义化。使用
  或其他语义化标签作为网格项，而不是滥用 。

  浏览器兼容性： CSS Grid在现代浏览器中得到了广泛支持，但在需要兼容旧版浏览器的项目中，可能需要考虑备用方案（如Flexbox或浮动）。

  通过掌握CSS Grid的这些核心概念和技巧，你将能够轻松构建出各种复杂且视觉吸引力的网页布局，告别传统表格带来的布局限制，迈向更灵活、更强大的前端开发。