在前端开发中，我们经常需要实现各种列表布局。传统的方法是使用 float 或者 display: inline-block，但是这些方法有一定的局限性，而 CSS Grid 布局则能够轻松实现各种复杂的列表布局，而且更加灵活。
常用的列表布局
在开始讲解 CSS Grid 布局实现列表布局之前，先来介绍一些常见的列表布局：
单列列表
单列列表是一种最常见的列表布局，每个列表项占据一行，如下图所示：
- --- - - --- - - --- - ------
两列列表
两列列表是在单列列表的基础上，将每行展示 2 个列表项，如下图所示：
- --- - --- - - --- - --- - - --- - --- - ------
三列列表
三列列表是在单列列表的基础上，将每行展示 3 个列表项，如下图所示：
- --- - --- - --- - - --- - --- - --- - - --- - --- - --- - ------
表格布局
表格布局是一种常用的数据展示方式，使用 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)) 来设置每一行的高度，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)) 来设置每一列的宽度，auto-fill 表示根据容器的大小自动调整列数，minmax(200px, 1fr) 表示每一列的最小宽度为 200px，最大宽度为 1fr，也就是平均分配列表容器剩余的空间。
实现两列列表后，我们需要将列表项的位置进行调整，可以使用 grid-row 和 grid-column 属性来实现，如下所示：
-------------------- - --------- ---- -- ------------ -- - --------------------- - --------- ---- -- ------------ -- -
这里通过 nth-child 伪类选择器来选择奇数和偶数列表项，然后使用 grid-row 和 grid-column 属性来将其放置到正确的位置。其中，grid-row: span 2 表示该项跨越 2 行，grid-column: 1 表示该项在第一列。
实现三列列表
实现三列列表的方式和两列列表类似，只需要将 grid-template-columns 属性改为 3，并且将每个列表项的宽度设置为 100% / 3 即可，如下所示：
---------- - -------- ----- ---------------------- --------- ------------- ------ - ----- - ------ --------- - --- -
同样地，实现三列列表后，我们需要将列表项的位置进行调整，可以使用 grid-row 和 grid-column 属性来实现，如下所示：
--------------------- - --------- ---- -- ------------ -- - --------------------- - --------- ---- -- ------------ -- - --------------------- - --------- ---- -- ------------ -- -
这里通过 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