精通 CSS Grid Layout 与真实案例（从入门到高级）

Source: Dev.to

什么是 CSS Grid？

CSS Grid 是现代网页开发中最强大的布局系统之一。它让你只用极少的代码就能创建复杂、响应式的布局——无需过度依赖 Flexbox 或外部框架。在本指南中，你将学习如何使用 CSS Grid 并通过真实可用的示例，从基础布局到高级响应式设计。

基础网格布局

示例：两列布局

HTML

<div class="grid">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid div {
  background: lightblue;
  padding: 20px;
}

结果： 两个等宽的列之间有 10 px 的间距。

响应式网格（Auto Fit）

示例：卡片布局

HTML

<div class="grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

CSS

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

.card {
  background: rgb(93 192 223);
  padding: 20px;
}

结果： 卡片会自动换行并调整大小，最小宽度保持在 200 px。

仪表盘布局

HTML

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

CSS

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 10px;
}

header {
  grid-area: header;
  background: #596af7;
  color: white;
}
aside {
  grid-area: sidebar;
  background: #eee;
  color: black;
}
main {
  grid-area: main;
  background: #eee;
}
footer {
  grid-area: footer;
  background: #333;
  color: white;
}

结果： 一个经典的仪表盘布局，侧边栏宽度固定，主内容区响应式。

图片画廊布局

HTML

<div class="img-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>

CSS

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

.img-gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

结果： 一个响应式画廊，每行填充尽可能多的图片，最小宽度为 250 px。

使用 Grid 居中

HTML

<div class="grid-center">
  Grid Center
</div>

CSS

.grid-center {
  display: grid;
  place-items: center;
  height: 100vh;
}

结果： 文本 “Grid Center” 在视口内垂直和水平居中。

CSS Grid 与 Flexbox 对比

CSS Grid 与 Flexbox 都是强大的布局工具，但它们在不同场景下各有优势：

• CSS Grid 适用于二维布局（行 和 列），如仪表盘、画廊以及复杂的页面结构。
• Flexbox 则在一维布局（行 或 列）中表现出色，例如导航栏、按钮组或简单的对齐任务。

选择合适的工具取决于项目的布局需求。