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

响应式设计是现代网站开发中不可或缺的一部分。CSS Grid布局提供了一种强大的方式来创建灵活且响应的布局。以下是如何使用CSS Grid实现基本响应式布局的简单示例：

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

.item {
  border: 1px solid #ccc;
  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>

在上述CSS中，auto-fit和minmax(200px, 1fr)确保容器中的项可以根据屏幕尺寸自动调整大小，最小宽度为200px，最大宽度占据可用空间。这种布局在不同设备上都能保持良好的响应性。