design/css-grid-tutorial

CSS Grid 是一种用于在网页上创建复杂布局的强大工具。本文将带您入门，了解 CSS Grid 的基本概念和用法。

基础概念

CSS Grid 允许你将网页布局划分为行和列，并可以独立控制它们的大小和位置。这使得创建复杂的响应式布局变得非常简单。

容器 (Container): 使用 display: grid; 或 display: grid-template-columns;/grid-template-rows; 的元素。
项目 (Item): 容器内的元素。
行 (Row): 容器内的水平区域。
列 (Column): 容器内的垂直区域。

基本语法

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列，每列等宽 */
  grid-template-rows: auto auto auto; /* 三行，自动高度 */
}

实例

假设我们要创建一个包含标题、内容、侧边栏的布局：

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

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-column: 1 / -1; /* 横跨所有列 */
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main-content {
  grid-column: 2;
  grid-row: 2;
}

.footer {
  grid-column: 1 / -1; /* 横跨所有列 */
}

更多信息，请访问我们的 CSS Grid 教程。

CSS Grid 是一种用于在网页上创建复杂布局的强大工具。本文将带您入门，了解 CSS Grid 的基本概念和用法。

### 基础概念

CSS Grid 允许你将网页布局划分为行和列，并可以独立控制它们的大小和位置。这使得创建复杂的响应式布局变得非常简单。

- **容器 (Container)**: 使用 `display: grid;` 或 `display: grid-template-columns;`/`grid-template-rows;` 的元素。
- **项目 (Item)**: 容器内的元素。
- **行 (Row)**: 容器内的水平区域。
- **列 (Column)**: 容器内的垂直区域。

### 基本语法

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列，每列等宽 */
  grid-template-rows: auto auto auto; /* 三行，自动高度 */
}

实例

假设我们要创建一个包含标题、内容、侧边栏的布局：

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

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-column: 1 / -1; /* 横跨所有列 */
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main-content {
  grid-column: 2;
  grid-row: 2;
}

.footer {
  grid-column: 1 / -1; /* 横跨所有列 */
}

更多信息，请访问我们的 CSS Grid 教程。