登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > CSSGrid不规则列布局技巧解析

CSSGrid不规则列布局技巧解析

2025-12-03 11:39:35 0浏览 收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《CSS Grid实现不规则列布局技巧》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

使用CSS Grid实现不规则列布局：告别传统表格的限制

本教程详细阐述如何利用CSS Grid实现复杂的、不规则的列布局，尤其适用于那些传统HTML表格难以实现的块状结构。文章将通过具体的CSS属性和HTML结构示例，指导读者如何定义网格、控制子项的跨度与位置，以及优化自动布局流程，从而高效构建灵活且响应式的页面布局。

1. 传统表格的局限与CSS Grid的优势

在网页布局设计中，我们经常会遇到需要创建包含不同尺寸块状元素的复杂排版需求，例如瀑布流、画廊或具有不规则行高的多列布局。传统的HTML

元素虽然可以用于展示表格数据，但其固有的行/列结构限制了布局的灵活性。当尝试使用
来实现不同列具有不同行高、或者单元格跨越不规则数量的行和列时，会变得异常复杂甚至难以实现，且不符合语义化原则。

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. 注意事项与最佳实践