CSS Grid 布局教程

CSS Grid 是一种用于在网页上创建复杂布局的强大工具。本文将为您介绍如何使用 CSS Grid 布局。

基本概念

CSS Grid 布局由两部分组成：容器（Container）和项目（Item）。容器指的是应用了 display: grid 或 display: inline-grid 的元素，而项目则是容器中的所有直接子元素。

容器属性

以下是一些常用的容器属性：

grid-template-columns：定义容器的列数和列宽。
grid-template-rows：定义容器的行数和行高。
grid-gap：定义单元格之间的间距。

项目属性

以下是一些常用的项目属性：

grid-column：定义项目所在的列。
grid-row：定义项目所在的行。
grid-area：定义项目的区域。

示例

以下是一个简单的 CSS Grid 布局示例：

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

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

.grid-item {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

扩展阅读

如果您想了解更多关于 CSS Grid 的内容，请阅读以下教程：

MDN Web Docs - CSS Grid Layout

希望这篇文章能帮助您更好地理解 CSS Grid 布局！🎉