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;属性定义的元素，它建立了一个新的网格格式上下文。网格项是网格容器的直接子元素，它们按照网格布局的规则进行排列。

2.2 网格线和网格单元格

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

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