10分钟理解CSS3 Grid布局

CSS3 Grid布局是一种新的网页布局方式，它能够让你更轻松地创建复杂的多列和多行布局。本文将带你了解CSS3 Grid布局的基础知识，并通过两个示例帮助你更好地理解。

基础概念

下面是一些CSS3 Grid布局的基础概念：

网格容器 (grid container)：包含网格项目的父元素。
网格项目 (grid item)：网格容器中可以变成复杂网络结构的子元素。
网格线 (grid line)：划分网格的线条，可以水平或者垂直。
网格轨道 (grid track)：由相邻的网格线围成的空间。
网格单元格 (grid cell)：由四个相邻的网格线夹住的矩形空间。
网格区域 (grid area)：由四条网格线所包围的一块区域。

要理解CSS3 Grid布局，需要掌握如下属性：

display: grid：创建一个网格容器。
grid-template-columns：定义网格容器的列。
grid-template-rows：定义网格容器的行。
grid-column：定义一个网格项目跨越的列。
grid-row：定义一个网格项目跨越的行。
grid-area：定义一个网格项目跨越的区域。

示例一

下面是一个简单的CSS3 Grid布局示例：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
</div>

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

.item {
  padding: 20px;
  font-size: 40px;
  text-align: center;
  background: #ddd;
}

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

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

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

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

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

.item6 {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

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

.item8 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.item9 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

在这个示例中，我们创建了一个3 x 3的网格，每个网格单元格都由1个网格项目填充。为了让<div class="item item1">1</div>这个元素跨越一行一列，我们使用了grid-row: 1 / 2;和grid-column: 1 / 2;这两个属性。

示例二

下面是另一个CSS3 Grid布局示例：

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 100px 1fr 100px;
  min-height: 100vh;
}

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  background: #ccc;
}

.sidebar {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  background: #ddd;
}

.content {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: #eee;
}

.footer {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
  background: #ccc;
}

在这个示例中，我们创建了一个页面布局，页面分为头部、侧边栏、内容区域和底部四个部分。为了实现这样的页面布局，我们使用了grid-template-columns: 1fr 3fr;和grid-template-rows: 100px 1fr 100px;来定义网格容器的列和行。