CSS Grid实现复杂不规则布局教程-html教程-PHP中文网

CSS Grid实现复杂不规则布局教程

DDD

发布： 2025-12-02 11:27:01

原创

533人浏览过

CSS Grid实现复杂不规则布局教程

本教程将深入探讨如何利用css grid布局实现传统html表格难以构建的复杂、不规则的网格结构，例如各列行高不一的布局。我们将详细介绍css grid的核心概念，包括网格容器、网格项、行列定义、自动流向以及精确的元素定位与跨度控制，并通过一个具体示例，指导您构建出高度灵活且响应式的页面布局，避免滥用表格进行非数据展示的布局设计。

理解传统表格的局限性与CSS Grid的优势

在网页布局设计中，尤其当需要创建类似砖石瀑布流或各列行高不一的复杂结构时，许多初学者可能会尝试使用HTML的

元素。然而，

元素的主要设计目的是展示二维表格数据，其结构 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类似，用于行。

实践：构建不规则的砖石布局

假设我们希望创建一个类似砖石瀑布流的布局，其中包含大小不一的元素，并且它们按列填充。

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

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

204

查看详情

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个列单元。这种精确控制对于固定某些重要元素的位置，防止自动流动的其他元素覆盖它们至关重要。