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

在现代Web开发中，响应式设计是必不可少的。CSS Grid布局提供了一种强大的工具来实现这一点。以下是如何使用CSS Grid创建一个简单的响应式网格布局：

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

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

在上述代码中，.container定义了一个网格容器，grid-template-columns属性使用auto-fit和minmax函数来创建响应式列。minmax(200px, 1fr)确保每个项目至少有200px宽，但可以增长以填充剩余空间。gap属性为网格项目之间添加间隔。

HTML结构如下：

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

这种布局在不同屏幕尺寸下都能保持良好的响应性，无需媒体查询即可实现基本的响应式设计。