CSS Grid 布局是一种强大的前端布局方式，它允许我们通过简单的 CSS 代码实现复杂的布局效果。在实际开发中，我们常常需要实现各种列表布局，比如网格列表、水平列表、竖直列表等等。本文将介绍利用 CSS Grid 布局实现不同类型列表布局的技巧和方法，并附上示例代码。
网格列表
网格列表是指将内容按照网格状排列的列表，每个网格中包含一个项目。比如，下面是一个 3 列网格列表的示例：
-- -------------------- ---- ------- ---- ----------------------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ---- -------------------- ------- ------展开代码
我们可以利用 CSS Grid 布局将这些项目排列成网格列表：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ---- ----- - ---------- - ----------------- ----- -------- ----- -展开代码
上面的代码中，我们使用 display: grid 指定了该容器使用 Grid 布局，grid-template-columns: repeat(3, 1fr) 指定了网格列数为 3 列，每列宽度为均分剩余空间（1fr），gap: 20px 则指定了每个网格之间的间隔为 20 像素。最后，我们在每个网格项上添加了一些样式，以便更好地观察该布局效果。
水平列表
水平列表是指将内容按照水平方向排列的列表，每个项目排列在一排中。比如，下面是一个水平列表的示例：
-- -------------------- ---- ------- --- ------------------------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ -----展开代码
我们可以利用 CSS Grid 布局将这些项目排列成水平列表：
-- -------------------- ---- ------- ---------------- - -------- ----- ---------------------- ---------------- ------------- ------ ---- ----- ----------- ----- -------- -- ------- -- - ---------------- -- - ----------------- ----- -------- ----- -展开代码
上面的代码中，我们使用 display: grid 指定了该列表使用 Grid 布局，grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 则指定了每个项目的最小宽度为 200 像素，最大宽度为均分剩余空间（1fr），并通过 auto-fit 参数让浏览器自动计算出每行可容纳的项目数。最后，我们添加了一些基本的样式以确保该布局能够正常显示。
竖直列表
竖直列表是指将内容按照竖直方向排列的列表，每个项目排列在一列中。比如，下面是一个竖直列表的示例：
-- -------------------- ---- ------- --- ---------------------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ -----展开代码
我们可以利用 CSS Grid 布局将这些项目排列成竖直列表：
-- -------------------- ---- ------- -------------- - -------- ----- ------------------- ---------------- ------------- ------ ---- ----- ----------- ----- -------- -- ------- -- - -------------- -- - ----------------- ----- -------- ----- -展开代码
上面的代码中，我们使用 display: grid 指定了该列表使用 Grid 布局，grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)) 则指定了每个项目的最小高度为 100 像素，最大高度为均分剩余空间（1fr），并通过 auto-fit 参数让浏览器自动计算出每列可容纳的项目数。最后，我们添加了一些基本的样式以确保该布局能够正常显示。
结语
通过本文的介绍，您已经了解了如何利用 CSS Grid 布局实现不同类型列表布局的技巧和方法。通过 Grid 布局，我们可以轻松地实现各种布局效果，提高开发效率和样式质量。希望本文对您有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678345881447767a5796c4ba
