使用CSS Grid布局创建响应式设计

在现代前端开发中，CSS Grid布局是一个强大的工具，它可以帮助我们创建复杂的响应式网页布局。以下是如何使用CSS Grid来创建一个简单的响应式网格布局的示例：

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

.item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

HTML结构如下：

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

在这个例子中，.container 类定义了一个网格容器，grid-template-columns 属性使用 auto-fill 和 minmax 函数来创建一个灵活的网格列布局，每个项目至少宽200px，并且可以填充整个容器的可用空间。gap 属性定义了项目之间的间距。通过这种方式，我们可以轻松地创建一个响应式网格布局，它会根据屏幕尺寸自动调整列的数量。