入门CSS Grid布局教程

1. 什么是CSS Grid布局？
   CSS Grid布局是一种用于网页布局的二维网格系统。它允许你将页面分割成行和列，以便更精确地控制页面上元素的位置和排列。

2. 基本概念
   2.1 网格容器
   首先，你需要将你的布局元素包裹在一个网格容器内。你可以通过以下代码创建一个网格容器：

.container {
  display: grid;
}

2.2 网格项目
网格容器内的每个元素都是网格项目。你可以使用grid-template-columns和grid-template-rows属性来定义行和列的大小。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
}

3. 放置网格项目
   3.1 显式放置项目
   你可以使用grid-row和grid-column属性来显式地放置网格项目。

.item {
  grid-row: 1 / 3;
  grid-column: 2 / 4;
}

3.2 自动放置项目
如果你不显式指定位置，Grid布局会自动放置项目。

.item {
  grid-row: span 2; /* 自动占用两行 */
  grid-column: span 3; /* 自动占用三列 */
}

4. 网格间距和对齐
   4.1 网格间距
   你可以使用grid-gap属性来定义行和列之间的间距。

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

4.2 对齐网格项目
你可以使用justify-self和align-self属性来控制单个网格项目的对齐方式。

.item {
  justify-self: center; /* 水平居中对齐 */
  align-self: end; /* 垂直底部对齐 */
}

5. 响应式设计
   Grid布局非常适合响应式设计。你可以使用媒体查询来在不同屏幕大小下修改网格布局。

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

CSS Grid布局为网页设计带来了更大的灵活性和控制性。通过这个简单的入门教程，你已经学会了Grid布局的基本用法，现在可以开始创建复杂的网页布局了。