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

在现代网页设计中，响应式布局是必不可少的。CSS Grid布局提供了一种强大的方法来创建灵活和响应式的网格系统。以下是如何使用CSS Grid创建一个简单的响应式布局的示例。

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

.item {
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
}

在上述代码中，.container类定义了一个网格容器，grid-template-columns属性使用repeat函数和auto-fill关键字来创建尽可能多的列，每列的最小宽度为200px，最大宽度由1fr（一份额）决定。这样，当屏幕尺寸变化时，网格中的列数会自动调整，实现响应式效果。

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

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

这种方法简单而强大，能够适应不同的屏幕尺寸，是创建响应式网页设计的一个有效工具。