前言：

还记得怎样实现网格布局吗，是不是已经忘得差不多了，现在让我们一起从零开始，回顾一下这个实用但又容易让人忽视的布局方法。

我们常常会在 ul 与 li 中实现网格布局，其实实现方法是很简单的，但各个属性的作用就需要再回顾一下了。

首先，我们来创建一个最基础的网格布局例子：

通过实际的例子方便我们理解：

html：

给我们的li添加上不一样的颜色易于区分。

CSS样式：

代码解析：

• display:grid: 将 ul 变成一个网格容器。
• grid-template-columns: 1fr 1fr 1fr: 有多少个fr就是创建几列，fr前面的数字则代表相应网格轨道的分数单位，就类似于 flex：1 这样的。
• grid-template-rows: 1fr 1fr 1fr: 同上，创建三行。
• column-gap: 20px: 列之间的间距。
• row-gap: 20px: 行之间的间距。

小改一下

很多时候我们想让一个格子占几行几列，这时就需要加上 span ，就像这样：

可不是你想的那个 span 标签，那么这段代码会带来什么呢？

效果如图：

可见第一个 li 元素占据了两行，后面的元素也顺势后移，明显这是 grid-row-end: span 2 的作用。想必大家也知道 grid-row-start: 1 的作用了，让这个 li 元素开始于第二行。列同理，把 row 改成 columns 即可。

自动填充网格项目

有时候，你可能不知道到底有多少网格项目。没关系，CSS 为你准备了 grid-auto-flow 属性。它可以自动帮你安排好这些项目。

这里 repeat(auto-fit, minmax(100px, 1fr)) 会根据可用空间自动调整列的数量，每列至少宽 100px，如果网格容器有足够的空间，则列的宽度可以扩展到 1fr，即网格容器可用空间的一个等分。

命名网格线

进阶一下，它帮助开发者更加灵活和直观地控制网格项目的放置，现在我们来看看它怎么用的。

html：

CSS样式：

想必大家也知道大概的效果了：

在 container 中我们定义了 start 、 middle 、 end 、 top 、 bottom ， 单看单词大家也就知道了大概的意思。start 到 middle 有 100px 的长度，其余都分给 middle 与 end 之间，top 到 bottom 有 100px 的长度。

在之后写样式时就非常方便且直观，直接写上对应的网格线即可，格式：起始线/结束线 。

应用场景

1. 响应式布局:
   • 创建可以适应不同设备和屏幕尺寸的布局。
   • 使用 minmax() 函数和 fr 单位来创建自适应的网格轨道。
2. 复杂布局:
   • 创建复杂的多区域布局，如新闻网站、博客、电子商务网站等。
   • 利用网格布局的多维特性来实现复杂的布局结构。
3. 图片画廊:
   • 创建可以自动调整图片大小和位置的图片画廊。
   • 使用 grid-auto-flow 和 grid-auto-columns 来创建自动填充的图片布局。
4. 数据展示:
   • 创建数据表格、卡片式布局或其他数据展示形式。
   • 利用网格布局来创建响应式的表格布局，其中列可以自适应地调整宽度。
5. 多列文章:
   • 创建多列文章布局，如报纸或杂志样式的设计。
   • 使用网格布局来实现多列文本布局，其中文本可以根据容器的大小进行流动。
6. 动态内容布局:
   • 当内容数量或大小不确定时，使用网格布局可以自动调整布局。
   • 利用 grid-auto-flow 和 grid-auto-columns 来适应动态生成的内容。
7. 导航菜单:
   • 创建响应式的导航菜单，可以随着屏幕尺寸的变化而调整布局。
   • 使用网格布局来创建可以自动堆叠或展开的导航菜单。

结语：

希望这篇文章可以让你对网格布局得心应手，可不能只沉浸在各种组件 module 里，把基础 CSS 忽略掉了。