使用 CSS Grid 构建现代布局

CSS Grid 是目前最强大的 CSS 布局系统之一。本文将通过实际案例，带你了解如何利用 Grid 快速构建响应式页面布局，告别繁琐的浮动和定位技巧。

什么是 CSS Grid？

CSS Grid Layout 是一种二维布局系统，它可以同时处理行和列。与 Flexbox 专注于一维布局不同，Grid 可以让你精确控制页面中每个元素的位置和大小。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

基本概念

在使用 Grid 之前，你需要了解几个核心概念：

• Grid Container — 设置 display: grid 的父元素
• Grid Item — Container 的直接子元素
• Grid Line — 构成网格结构的分界线
• Grid Track — 两条相邻网格线之间的空间（行或列）
• Grid Cell — 四条网格线围成的最小单元

实战：响应式卡片布局

最常见的需求之一是创建一个自适应的卡片网格。使用 Grid，只需几行代码就能实现：

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

auto-fit 配合 minmax() 函数是 Grid 最强大的特性之一。它能根据容器宽度自动决定列数，每列最小 280px，最大平分剩余空间。无需媒体查询就能实现响应式布局！

高级布局：命名区域

对于复杂的页面结构，grid-template-areas 提供了一种直观的方式来定义布局：

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

总结

CSS Grid 从根本上改变了我们构建网页布局的方式。它不仅代码更简洁，而且更加灵活和可维护。建议从简单的网格开始练习，逐步掌握更高级的特性。

下一篇我们将探讨 Grid 与 Flexbox 的配合使用，敬请期待！