CSS Grid 概述

CSS Grid 是一种用于在网页上创建复杂布局的布局系统。它提供了一种更简单、更强大的方式来布局、对齐和分配容器中元素的空间。

CSS Grid 基本概念

1. 容器 (Container): 使用 display: grid; 或 display: inline-grid; 声明的 HTML 元素。
2. 项目 (Item): 容器中的所有子元素，默认情况下，所有项目被分配到一个单一的网格中。
3. 网格线 (Grid Line): 网格的边界，由网格轨道定义。
4. 网格轨道 (Grid Track): 网格线之间的空间。
5. 单元格 (Grid Cell): 网格中由四条边界的网格线所定义的区域。

CSS Grid 属性

以下是一些常用的 CSS Grid 属性：

• grid-template-columns: 定义列的大小和数量。
• grid-template-rows: 定义行的大小和数量。
• grid-template-areas: 使用网格区域（areas）来命名和管理网格中的区域。
• grid-auto-columns 和 grid-auto-rows: 定义自动生成的网格轨道的大小。

示例

<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 class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

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

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  text-align: center;
}

更多关于 CSS Grid 的内容，请参考本站 CSS Grid 教程。

<center><img src="https://cloud-image.ullrai.com/q/css_grid/" alt="CSS Grid 示例"/></center>