CSS Grid 指南

CSS Grid 布局（CSS 网格布局）为网页布局提供了一套全新的方法。它允许你以二维网格的形式来布局网页内容，使得网页布局更加灵活和强大。

CSS Grid 基础

CSS Grid 布局的基本概念包括：

容器（Container）：定义网格的容器元素。
网格（Grid）：网格的行和列。
单元格（Cell）：网格中的单个单元格。

容器属性

display: grid; 或 display: inline-grid;
grid-template-columns: ...; 定义列的尺寸和数量。
grid-template-rows: ...; 定义行的尺寸和数量。
grid-template-areas: ...; 使用区域名称来定义单元格。

单元格属性

grid-column: ...; 定义单元格所在的列。
grid-row: ...; 定义单元格所在的行。
grid-area: ...; 使用区域名称来定义单元格。

实例

假设我们有一个简单的布局，包含标题、侧边栏和内容区域。

<div class="grid-container">
  <div class="header">标题</div>
  <div class="sidebar">侧边栏</div>
  <div class="content">内容</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    "header header"
    "sidebar content";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

扩展阅读

想要了解更多关于 CSS Grid 的知识，可以阅读本站的《深入理解 CSS Grid》指南：/深入理解 CSS Grid