CSS Grid 布局实现列表布局技巧教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要实现各种列表布局。传统的方法是使用 float 或者 display: inline-block，但是这些方法有一定的局限性，而 CSS Grid 布局则能够轻松实现各种复杂的列表布局，而且更加灵活。

常用的列表布局

在开始讲解 CSS Grid 布局实现列表布局之前，先来介绍一些常见的列表布局：

单列列表

单列列表是一种最常见的列表布局，每个列表项占据一行，如下图所示：

- 列表项 1
- 列表项 2
- 列表项 3
......

两列列表

两列列表是在单列列表的基础上，将每行展示 2 个列表项，如下图所示：

- 列表项 1   列表项 2
- 列表项 3   列表项 4
- 列表项 5   列表项 6
......

三列列表

三列列表是在单列列表的基础上，将每行展示 3 个列表项，如下图所示：

- 列表项 1   列表项 2   列表项 3
- 列表项 4   列表项 5   列表项 6
- 列表项 7   列表项 8   列表项 9
......

表格布局

表格布局是一种常用的数据展示方式，使用 table 元素进行实现。但是 table 元素一般用于数据展示，对于其他类型的列表布局使用 CSS Grid 布局实现更加灵活。

CSS Grid 布局实现列表布局

CSS Grid 布局是一种比较新的布局方式，目前主流的浏览器都已经支持。使用 CSS Grid 布局可以实现复杂的布局，也可以轻松实现各种列表布局。

实现单列列表

单列列表最简单的实现方式就是使用 CSS Grid 布局中的 grid-template-rows 属性，如下所示：

.container {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
}

这里的 container 是列表的容器元素，我们需要将其设置为 display: grid，然后使用 grid-template-rows 属性来设置每一行的高度。上述代码中使用了 repeat(auto-fill, minmax(100px, 1fr)) 来设置每一行的高度，auto-fill 表示根据容器的大小自动调整行数，minmax(100px, 1fr) 表示每一行的最小高度为 100px，最大高度为 1fr，也就是平均分配列表容器剩余的空间。

这样就能够实现一个简单的单列列表，可以根据需要自行调整行高和列表项的样式。

实现两列列表

实现两列列表的方式和单列列表类似，只需要将 grid-template-rows 属性改为 grid-template-columns 属性即可，如下所示：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

这里的 container 同样是列表的容器元素，我们需要将其设置为 display: grid，然后使用 grid-template-columns 属性来设置每一列的宽度。上述代码中使用了 repeat(auto-fill, minmax(200px, 1fr)) 来设置每一列的宽度，auto-fill 表示根据容器的大小自动调整列数，minmax(200px, 1fr) 表示每一列的最小宽度为 200px，最大宽度为 1fr，也就是平均分配列表容器剩余的空间。

实现两列列表后，我们需要将列表项的位置进行调整，可以使用 grid-row 和 grid-column 属性来实现，如下所示：

// javascriptcn.com 代码示例
.item:nth-child(odd) {
  grid-row: span 2;
  grid-column: 1;
}

.item:nth-child(even) {
  grid-row: span 2;
  grid-column: 2;
}

这里通过 nth-child 伪类选择器来选择奇数和偶数列表项，然后使用 grid-row 和 grid-column 属性来将其放置到正确的位置。其中，grid-row: span 2 表示该项跨越 2 行，grid-column: 1 表示该项在第一列。

实现三列列表

实现三列列表的方式和两列列表类似，只需要将 grid-template-columns 属性改为 3，并且将每个列表项的宽度设置为 100% / 3 即可，如下所示：

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.item {
  width: calc(100% / 3);
}

同样地，实现三列列表后，我们需要将列表项的位置进行调整，可以使用 grid-row 和 grid-column 属性来实现，如下所示：

// javascriptcn.com 代码示例
.item:nth-child(3n+1) {
  grid-row: span 2;
  grid-column: 1;
}

.item:nth-child(3n+2) {
  grid-row: span 2;
  grid-column: 2;
}

.item:nth-child(3n+3) {
  grid-row: span 2;
  grid-column: 3;
}

这里通过 nth-child 伪类选择器来选择每个列表项，然后使用 grid-row 和 grid-column 属性来将其放置到正确的位置。其中，grid-row: span 2 表示该项跨越 2 行，grid-column: 1 表示该项在第一列，相应地，grid-column: 2 表示该项在第二列，grid-column: 3 表示该项在第三列。

总结

CSS Grid 布局可以轻松实现各种列表布局，不仅更加灵活，而且代码相对简单。我们可以根据需要自行调整行高、列宽和列表项的样式，实现各种复杂的列表布局。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530e3e47d4982a6eb275762