CSS3最强布局-Grid布局

1. CSS Grid布局概述

1.1 什么是CSS Grid布局

CSS Grid布局是一种二维布局系统，用于在网页上创建复杂的布局结构。它允许开发者在水平和垂直方向上同时控制元素的布局，这是传统CSS布局方法（如浮动和定位）所无法实现的。

1.2 CSS Grid布局的特点

CSS Grid布局具有以下特点：

二维布局：能够同时处理行和列的布局，提供了真正的二维布局能力。
灵活的网格线：开发者可以定义任意数量的行和列，以及它们的命名，从而实现精确的布局控制。
网格模板区域：通过grid-template-areas属性，可以将网格划分为具有名称的区域，方便对复杂布局的管理。
网格间距：使用gap属性可以轻松设置行和列之间的间距，改善了布局的可读性和美观性。
对齐和分布：提供了丰富的对齐和分布选项，如justify-items、align-items、justify-content和align-content等，使得元素的对齐和分布更加灵活和强大。
响应式设计：CSS Grid布局天然支持响应式设计，可以轻松创建适应不同屏幕尺寸的布局。

1.3 浏览器支持情况

CSS Grid布局得到了现代浏览器的广泛支持。截至2023年，主流浏览器如Google Chrome、Mozilla Firefox、Safari、Microsoft Edge等都对CSS Grid提供了良好的支持。对于旧版浏览器，如Internet Explorer 10和11，虽然也提供了一定程度的支持，但可能需要使用前缀或者回退方案。根据Can I use网站的数据，CSS Grid的全球支持率超过95%，这使得它成为现代网页设计中可行且可靠的选择。

2. CSS Grid布局基础

2.1 网格容器和网格项

网格容器是使用CSS的display: grid;或display: inline-grid;属性定义的元素，它建立了一个新的网格格式上下文。网格项是网格容器的直接子元素，它们按照网格布局的规则进行排列。

容器定义：在CSS中，通过设置display: grid;属性，可以将一个元素定义为网格容器。例如：
```
.container {
     
  display: grid;
}
```
网格项：网格容器的直接子元素自动成为网格项，无需特别定义。它们将按照网格布局的规则分布在容器内。

2.2 网格线和网格单元格

网格线是网格容器中的水平或垂直线，它们定义了网格的结构。网格单元格是两条水平网格线和两条垂直网格线相交形成的区域，是网格系统中最小的单元。

网格线的命名：网格线可以被赋予名称，以便于在CSS中进行引用。例如：

.container {
     
  grid-template-columns: [first-line] 100px [second-line] 100px [third-line];
}

网格单元格：是由相邻的网格线围成的区域。在定义了网格线后，内容会自动填充到这些单元格中。

2.3 创建网格容器

创建网格容器涉及到定义列和行的大小，以及如何分配空间给网格项。

定义列和行：使用grid-template-columns和grid-template-rows属性来定义网格的列宽和行高。例如：
```
.container {
     
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 50px;
}
```
空间分配：可以使用fr单位来分配可用空间的比例，或者使用百分比、固定长度等。例如：
```
.container {
     
  grid-template-columns: 1fr 2fr 1fr;
}
```

网格线命名：可以通过方括号来命名网格线，方便在定位网格项时使用。例如：

.container {
     
  grid-template-columns: [first-line] 100px [second-line] auto [third-line];
}

3. 定义网格轨道

3.1 grid-template-columns

grid-template-columns 属性用于定义网格布局中的列大小和数量。它可以设置为固定长度（如 100px）、百分比（如 50%）、或者使用 fr 单位来表示可用空间的分数。例如，grid-template-columns: 1fr 2fr 1fr; 会创建三列，其中第二列是第一列的两倍宽。

固定长度：grid-template-columns: 100px 200px 100px; 创建三列，第一列和第三列宽度为100像素，第二列宽度为200像素。
百分比：grid-template-columns: 33% 33% 34%; 创建三列，每列宽度根据容器宽度的百分比分配。
fr 单位：grid-template