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

在现代网页设计中，响应式布局是必不可少的。CSS Grid布局提供了强大的工具来构建灵活的响应式页面。以下是一个简单的示例，展示如何使用CSS Grid来创建一个基本的响应式布局。

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

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

在上述代码中，.container 是一个容器，使用 grid-template-columns 属性来定义列的布局。repeat(auto-fit, minmax(200px, 1fr)) 表示自动适应屏幕宽度，每列至少200px宽，最大占据可用空间的1部分。gap 属性用于设置列与列之间的间距。

HTML结构如下：

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

通过这种方式，无论屏幕大小如何变化，.item 元素都会自动调整大小以适应容器宽度，实现响应式布局。这种布局方式简洁而有效，非常适合现代网站设计。