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

本教程将深入探讨如何利用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的几个核心属性：

1. display: grid: 将一个HTML元素定义为网格容器（Grid Container），其直接子元素将成为网格项（Grid Item）。
2. grid-template-columns: 定义网格的列结构。可以指定列的数量、宽度，支持多种单位（如px, em, rem, %, fr等）。fr单位表示可用空间的分数，非常适合创建弹性列。
3. grid-template-rows: 定义网格的行结构。与grid-template-columns类似，用于指定行的数量和高度。
4. gap (或 grid-gap): 定义网格线之间的间距，可以同时设置行间距和列间距。
5. grid-auto-flow: 控制网格项的自动放置方向。默认值为row，即按行填充；设置为column则按列填充。这在创建瀑布流或多列布局时非常关键。
6. grid-column / grid-row: 用于定位或设置网格项跨越的列/行。
   • grid-column: start / end：定义网格项从哪条列线开始，到哪条列线结束。
   • grid-column: span N：定义网格项跨越N个列。
   • grid-row: start / end 或 grid-row: span N：与grid-column类似，用于行。

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

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

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

腾讯Effidit

腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验

65

查看详情

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

代码解析

1. 容器设置:
   • display: grid;: 激活网格布局。
   • grid-template-columns: 2fr 1fr ...;: 定义了10列，其中某些列的宽度是其他列的两倍，实现了列宽的不均匀分布。fr单位确保了列的弹性伸缩。
   • grid-template-rows: repeat(15, 1fr);: 定义了15行，每行高度相等，并会根据内容和容器高度自动调整。
   • gap: 5px;: 设置网格单元之间的间距。
   • grid-auto-flow: column;: 这是实现“按列填充”的关键。如果没有这个属性，网格项会默认按行从左到右填充。
2. 默认网格项样式:
   • .container > div: 所有的网格项默认占据1列和3行。这是大多数“小砖块”的基础尺寸。
3. 特殊网格项样式:
   • 通过:nth-child()选择器，我们选取了特定的网格项（例如第1、2、3个，以及第14、15、16个等），并将它们的grid-row设置为span 5，使它们的高度变为默认项的5/3倍，从而创建出高矮不一的视觉效果。
4. 精确位置与跨度:
   • 对于最后三个特殊的网格项（第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，您将能够构建出更优雅、更灵活且易于维护的现代网页布局。

以上就是CSS Grid实现复杂不规则布局教程的详细内容，更多请关注php中文网其它相关文章！