CSS Grid 布局教程

CSS Grid 布局是 CSS3 新增的一种布局方式，它允许开发者以二维空间的方式对页面元素进行布局。相较于传统的Flexbox布局，CSS Grid布局提供了更加灵活和强大的布局能力。

基本概念

• 容器（Container）：使用 display: grid; 或 display: grid-template; 声明的元素。
• 项目（Item）：容器中的所有子元素都是项目。
• 网格线（Grid Line）：水平网格线（横线）和垂直网格线（竖线）将容器划分为网格。
• 网格单元格（Grid Cell）：交叉的网格线形成的区域。

网格定义

• grid-template-columns：定义每一列的宽度。
• grid-template-rows：定义每一行的宽度。
• grid-template-areas：定义网格区域的名称和位置。

实例

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "a a c"
    "b b c";
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  text-align: center;
}
.grid-item:nth-child(1) { grid-area: a; }
.grid-item:nth-child(2) { grid-area: b; }
.grid-item:nth-child(3) { grid-area: c; }

CSS Grid 示例

学习资源

• MDN CSS Grid Layout

希望这个教程能帮助您更好地理解和使用 CSS Grid 布局。如果您有任何问题，欢迎在评论区提问。