使用CSS Grid布局实现响应式设计

在现代前端开发中，响应式设计是必不可少的。CSS Grid布局提供了一种强大的方式，让我们可以轻松地创建响应式布局。以下是一个简单的示例，展示如何使用CSS Grid创建一个基本的响应式布局。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ddd;
}

在HTML中，你可以这样使用：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多项目 -->
</div>

这段CSS代码使用了auto-fit和minmax函数来创建一个灵活的网格布局，其中每个项目至少有200px宽，并且可以适应容器的可用空间。gap属性用于设置网格项目之间的间距。这种布局会自动根据屏幕大小调整项目的大小，实现响应式效果。