CSS Grid 是一个强大的布局工具，可以轻松实现各种复杂的布局效果。在本文中，我们将介绍使用 CSS Grid 实现列表布局的八种方式。这些方法都有其独特的适用场景，可以帮助你更好地掌握 CSS Grid 的使用技巧。
1. 基础列表布局
首先，我们来看一下最基础的列表布局。这种布局方式非常简单，只需要将列表项放在一个网格容器中即可。
<div class="grid-container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - ----------------- ----- -------- ----- -展开代码
这段代码中，我们使用 display: grid 将父元素变成一个网格容器，然后使用 grid-template-columns 定义了四列等宽的网格，使用 grid-gap 定义了网格之间的间隔。在子元素中，我们设置了一个背景色和一些内边距，以便更好地区分列表项。
2. 自适应列宽
如果你希望每列的宽度能够根据内容自适应，可以使用 auto-fit 关键字来定义列数。这样，列数会根据容器宽度自适应，同时保证每列宽度都足够宽以容纳内容。
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; }
这里我们使用了 minmax 函数来定义每列的最小和最大宽度。minmax(200px, 1fr) 的意思是，每列的最小宽度为 200 像素，最大宽度为网格容器宽度的 1/4。
3. 等高列表布局
如果你希望每个列表项的高度都相等，可以使用 grid-auto-rows 属性来指定每行的高度。
.grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50px; grid-gap: 10px; }
这里我们将每行的高度设置为 50 像素，这样每个列表项的高度都会相等。
4. 多列列表布局
如果你希望在同一行中显示多个列表项，可以使用 grid-column 属性来指定每个列表项所占的列数。
<div class="grid-container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> <div class="item item4">Item 4</div> <div class="item item5">Item 5</div> <div class="item item6">Item 6</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ------ - ------------ - - -- - ------ - ------------ - - -- - ------ - ------------ - - -- --------- -- - ------ - ------------ - - -- --------- -- - ------ - ------------ - - -- --------- -- - ------ - ------------ - - -- --------- -- -展开代码
这里我们使用 grid-column 属性来指定每个列表项所占的列数。例如，.item1 的 grid-column 属性值为 1 / 3，表示它占据了第一列和第二列。同样地，我们也可以使用 grid-row 属性来指定每个列表项所占的行数。
5. 自适应多列列表布局
如果你希望列表项的列数能够自适应，可以使用 auto-fill 关键字来定义列数。
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- - ------ - ------------ - - -- - ------ - ------------ - - -- - ------ - ------------ - - -- --------- -- - ------ - ------------ - - -- --------- -- - ------ - ------------ - - -- --------- -- - ------ - ------------ - - -- --------- -- -展开代码
这里我们使用了 auto-fill 关键字来定义列数，表示列数会根据容器宽度自适应。同时，我们也使用了 minmax 函数来定义每列的最小和最大宽度。
6. 具有固定顶部和底部的列表布局
如果你希望列表项的顶部和底部都有固定的元素，可以使用 grid-template-areas 属性来定义网格区域。
<div class="grid-container"> <div class="top">Header</div> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> <div class="item item4">Item 4</div> <div class="bottom">Footer</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ------------------- ---- --- ----- -------------------- ------- ------ ------ ------- ------ ----- ----- ------ ------- ------ ------ -------- --------- ----- - ---- - ---------- ------- - ------- - ---------- ------- -展开代码
这里我们使用了 grid-template-areas 属性来定义网格区域。我们将列表项放在了中间一行，将顶部元素放在了第一行，底部元素放在了第三行。通过 grid-area 属性，我们将顶部元素和底部元素放在了对应的网格区域中。
7. 具有固定左侧和右侧的列表布局
如果你希望列表项的左侧和右侧都有固定的元素，可以使用 grid-template-columns 属性来定义列宽。
<div class="grid-container"> <div class="left">Left</div> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> <div class="item item4">Item 4</div> <div class="right">Right</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---- --- ----- ------------------- --------- ----- --------- ----- - ----- - ------------ -- --------- - - -- - ------ - ------------ -- --------- - - -- -展开代码
这里我们使用了 grid-template-columns 属性来定义列宽。我们将列表项放在了中间一列，将左侧元素放在了第一列，右侧元素放在了第三列。通过 grid-column 和 grid-row 属性，我们将左侧元素和右侧元素放在了对应的网格区域中。
8. 具有固定顶部、左侧和右侧的列表布局
如果你希望列表项的顶部、左侧和右侧都有固定的元素，可以将上面两种布局方式结合起来使用。
-- -------------------- ---- ------- ---- ----------------------- ---- ------------------------ ---- ----------------------- ---- ----------- ----------- ------- ---- ----------- ----------- ------- ---- ----------- ----------- ------- ---- ----------- ----------- ------- ---- ------------------------- ---- --------------------------- ------展开代码
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- ---- --- ----- ------------------- ---- --- ----- -------------------- ------- ------ ------ ------- ----- ----- ----- ------ ----- ----- ----- ------ ------- ------ ------ -------- --------- ----- - ---- - ---------- ------- - ------- - ---------- ------- - ----- - ---------- ----- - ------ - ---------- ------ -展开代码
这里我们将上面两种布局方式结合起来使用。我们将列表项放在了中间两行两列，将左侧元素放在了第一列，右侧元素放在了第三列，将顶部元素放在了第一行，底部元素放在了第四行。通过 grid-area 属性，我们将所有元素放在了对应的网格区域中。
结语
在本文中，我们介绍了使用 CSS Grid 实现列表布局的八种方式，包括基础列表布局、自适应列宽、等高列表布局、多列列表布局、自适应多列列表布局、具有固定顶部和底部的列表布局、具有固定左侧和右侧的列表布局、具有固定顶部、左侧和右侧的列表布局。这些方法都有其独特的适用场景，可以帮助你更好地掌握 CSS Grid 的使用技巧。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67892643881faa801f4f5a02
