CSS Grid 是 CSS 中用于布局的强大工具，它提供了二维布局系统。本文将详细介绍 CSS Grid 的核心概念、属性以及实际应用技巧。

什么是 CSS Grid?

CSS Grid Layout（网格布局）是 CSS 中最强大的布局系统之一。它是一个二维布局系统，可以同时处理行和列，这使得构建复杂的网页布局变得非常简单。

基本概念

网格容器 (Grid Container)

通过将元素的 display 属性设置为 grid 或 inline-grid 来创建网格容器。

.container {
  display: grid;
}

网格项 (Grid Item)

网格容器的直接子元素就是网格项。

网格线 (Grid Line)

构成网格结构的分界线。它们可以是垂直的（列网格线）或水平的（行网格线）。

网格轨道 (Grid Track)

两条相邻网格线之间的空间。可以是列轨道或行轨道。

网格单元格 (Grid Cell)

两个相邻的行网格线和两个相邻的列网格线之间的空间。

网格区域 (Grid Area)

由四条网格线包围的总空间。一个网格区域可以由任意数量的网格单元格组成。

核心属性

grid-template-columns 和 grid-template-rows

定义网格的列和行的大小。

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: 50px 100px;
}

grid-column 和 grid-row

指定网格项在网格中的位置。

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

grid-area

grid-area 是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写。

.item {
  grid-area: 1 / 1 / 3 / 3;
}

gap

设置网格项之间的间距。可以使用 row-gap 和 column-gap 分别设置行间距和列间距。

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

实战案例

通过一个简单的网页布局案例来演示 CSS Grid 的使用。

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header header"
    "nav main sidebar"
    "footer footer footer";
  height: 100vh;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: #007acc;
  color: white;
  padding: 10px;
}

.nav {
  grid-area: nav;
  background-color: #005a9e;
  color: white;
  padding: 10px;
}

.main {
  grid-area: main;
  background-color: #f4f4f4;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
}

结论

CSS Grid 为现代 Web 布局提供了强大的解决方案。通过掌握其核心概念和属性，我们可以轻松创建复杂且响应式的网页布局。