面试题：CSS Grid布局下如何实现一个自适应且可响应式的卡片式布局

Question

假设你要创建一个卡片式布局，卡片数量不固定，需要在不同屏幕尺寸下合理自适应排列，如在大屏幕上每行显示4个卡片，中等屏幕每行显示3个，小屏幕每行显示2个。请使用CSS Grid布局技术来描述实现思路，并给出关键的CSS代码片段。

Answer 1

实现思路

1. 使用CSS Grid创建一个网格容器来容纳卡片。
2. 通过@media媒体查询，根据不同屏幕尺寸设置不同的网格模板列数，从而实现卡片的自适应排列。

关键CSS代码片段

/* 定义网格容器 */
.card-container {
  display: grid;
  grid-gap: 10px; /* 卡片间距 */
}

/* 大屏幕（大于等于1200px）每行显示4个卡片 */
@media (min-width: 1200px) {
  .card-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 中等屏幕（大于等于768px小于1200px）每行显示3个卡片 */
@media (min-width: 768px) and (max-width: 1199px) {
  .card-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 小屏幕（小于768px）每行显示2个卡片 */
@media (max-width: 767px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

假设卡片HTML结构如下：

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <!-- 更多卡片 -->
</div>

并且可以给.card添加一些基本样式，例如：

.card {
  background-color: lightgray;
  padding: 20px;
}