关于多列布局，我们平时开发中，可能会遇到如下需求：
一个父元素中包含 n 个子元素，每一行显示m个子元素，并且根据设备宽度实现自适应布局。
针对这种布局方式，可以使用 CSS Grid 或 CSS Flexbox 来实现：
方案一：使用 CSS Grid 实现自适应列布局
CSS Grid 通过设置 grid-template-columns 为 repeat(auto-fit, minmax(minColumnWidth, 1fr)) 来实现自适应列数。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应列布局</title>
<style>
/* 父元素 */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 设置最小列宽为200px，列数自适应 */
gap: 10px; /* 子元素间距 */
}
/* 子元素样式 */
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<!-- n 个子元素 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
解释：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));：
auto-fit 会根据父容器的宽度自动适配列数。
minmax(200px, 1fr) 表示每一列的最小宽度为 200px，最大宽度为 1fr（即均分剩余空间）。
gap: 10px; 设置了子元素之间的间距。
当页面宽度减小到无法再容纳多列时，布局会自动适配为更少的列，直至只有一列。
方案二：使用 Flexbox 实现自适应列布局
Flexbox 布局也可以实现类似的自适应列布局，特别是在简单的场景下。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应列布局 - Flexbox</title>
<style>
/* 父元素 */
.container {
display: flex;
flex-wrap: wrap; /* 自动换行 */
gap: 10px;
}
/* 子元素 */
.item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
font-size: 20px;
flex: 1 1 200px; /* 子元素最小宽度为200px，最大为自适应 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<!-- n 个子元素 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
flex-wrap: wrap;：让子元素在超出父容器的宽度时自动换行。
flex: 1 1 200px;：
1 1 表示子元素可以按比例缩放。
200px 表示子元素的最小宽度，超过200px时均分剩余空间。