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

响应式设计是现代网页设计中不可或缺的一部分。CSS Grid布局提供了灵活的网格系统，可以轻松实现响应式布局。以下是简单的代码示例：

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

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

在这个例子中，.container 定义了一个网格容器，grid-template-columns 属性使用 auto-fill 和 minmax 函数来创建动态列宽。这意味着网格会自动填充可用空间，并根据容器大小调整列的数量。grid-gap 定义了网格项之间的间距。

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

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

这段代码将创建一个响应式的网格布局，无论屏幕大小如何变化，网格项都会自动调整大小和排列。这种布局非常适合制作适应不同设备的网页。