前端grid布局—列表卡片自适应排列展示的几个场景和对应方案（纯css实现）

分享前端常见的几种列表自适应排列方式，使用grid布局。这几种情况都不太好用flex实现，一般需要配合js，使用grid可以完全用css实现。

场景1.卡片宽固定+页面的左右padding固定+一行显示的卡片个数自适应+卡片之间的左右留白间隙不固定

场景2.页面的左右padding固定+卡片之间的左右留白间隙固定+一行显示的卡片个数固定+卡片宽自适应（该展示方式有一个缺陷，就是卡片宽度是百分比，在特别宽的屏幕上会很扁，再比如把浏览器强制缩小比例）

场景3.卡片宽固定+卡片之间的左右留白间隙固定+一行显示的卡片个数自适应+页面的左右padding不固定且内容区在水平方向居中

场景1在不同宽度屏幕下的自适应效果：

代码实现：

// html
<div class="container">
  <div class="card">1</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card">5</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card">10</div>
</div>
    
// css
.container {
  border: 1px dashed;
  // 下面是重点
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px); // 自动填充一行的卡片个数
  justify-content: space-between; // 卡片两端对齐，与flex的该属于一致
}

场景2在不同宽度屏幕下的自适应效果： 代码实现：

// html
<div class="container">
  <div class="card">1</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card">5</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card">10</div>
</div>
    
// css
.container {
  border: 1px dashed;
  // 下面是重点
  display: grid;
  grid-template-columns: repeat(auto-fill, calc((100% - 60px) / 4)); // 一行排列4个卡片，卡片之间的空隙是20px，所以每个卡片的宽度为60px是(100% - 60px) / 4)
}

场景3在不同宽度屏幕下的自适应效果： 代码实现：

// html
<div class="container">
  <div class="card">1</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card">5</div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card">10</div>
</div>
    
// css
.container {
  border: 1px dashed;
  display: grid;
  // 下面是重点
  grid-gap: 20px; // 卡片左右间隙
  grid-template-columns: repeat(auto-fill, 200px); // 自动填充一行的卡片个数
  justify-content: center; // 每行的卡片整体居中，但最后一行如果没有填充满会左对齐
}