CSS Grid 布局：属性及使用详解

[一、CSS Grid 布局的基础概念](#一、CSS Grid 布局的基础概念)
[二、主要的 CSS Grid 属性](#二、主要的 CSS Grid 属性)
- [1、`display: grid` / `display: inline-grid`声明 Grid 容器](#1、display: grid / display: inline-grid声明 Grid 容器)
- [2、`grid-template-columns` / `grid-template-rows`Grid 容器中列和行的尺寸](#2、grid-template-columns / grid-template-rowsGrid 容器中列和行的尺寸)
- [3、 `grid-template-areas`命名布局区域](#3、 grid-template-areas命名布局区域)
- [4、`gap`/ `grid-gap` 设置网格项之间的间距](#4、gap/ grid-gap 设置网格项之间的间距)
- [5、`grid-column` / `grid-row`：控制元素在 Grid 中的定位](#5、grid-column / grid-row：控制元素在 Grid 中的定位)
- [6、 `justify-items` / `align-items`：控制Grid项的对齐](#6、 justify-items / align-items：控制Grid项的对齐)
- [7、`justify-content` / `align-content`控制整个 Grid 容器的对齐](#7、justify-content / align-content控制整个 Grid 容器的对齐)
[三、常见的 Grid 布局设计](#三、常见的 Grid 布局设计)
- [1、简单的 2 列布局](#1、简单的 2 列布局)
- [2、定制化的页面布局](#2、定制化的页面布局)
四、总结

CSS Grid 布局是一个强大的二维布局系统，它使得网页开发中的布局工作更加简洁和高效。Grid 布局可以同时处理水平和垂直方向的排列，允许开发者轻松地设计复杂的网页布局。

一、CSS Grid 布局的基础概念

Grid 布局由两部分组成：

Grid 容器（Grid Container） ：通过给元素设置 display: grid 或 display: inline-grid 来创建一个 Grid 容器。所有直接子元素将成为 Grid 项目。
Grid 项目（Grid Items）：Grid 容器内的直接子元素。

二、主要的 CSS Grid 属性

1、`display: grid` / `display: inline-grid`声明 Grid 容器

作用：用于声明一个元素为 Grid 容器，display: grid 会让元素成为块级 Grid 容器，display: inline-grid 会让元素成为内联 Grid 容器。
使用方法：

css 复制代码

.container {
  display: grid;
}

2、`grid-template-columns` / `grid-template-rows`Grid 容器中列和行的尺寸

作用：定义 Grid 容器中列和行的尺寸。
- grid-template-columns 设置列的宽度。
- grid-template-rows 设置行的高度。
语法：你可以指定多个尺寸，使用空格分开，或者使用 repeat() 函数来简化代码。
示例：

css 复制代码

.container {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  /* 200px：第一列宽度为 200px,1fr：第二列的宽度占剩余空间,100px：第三列宽度为 100px。 */
  grid-template-rows: 50px auto;
  /* 50px：第一行高度为 50px,auto：第二行的高度由内容决定。 */
}

效果：

3、 `grid-template-areas`命名布局区域

作用：使用名称化的布局，将 Grid 项目放置在命名的区域内。
- 通过命名区域来控制 Grid 项目的位置。
- 每个区域可以由多个行或列组成，但必须由名称指定。
- 这种方法可以让布局更直观、易于维护，也能让 HTML 和 CSS 之间的关系更加明确。
语法： grid-template-areas 是一个由多个字符串组成的属性，每个字符串代表一行。而在每个字符串中，空格分隔的每个部分代表一列，这些部分的顺序决定了每个区域在 Grid 容器中的位置。
- 结构：区域名称可以是你自定义的字符串，它们将用于对应的 grid-area 属性来定位元素。
  css 复制代码
```
grid-template-areas: 
    "区域1 区域2 区域3"
    "区域4 区域5 区域6"
    "区域7 区域8 区域9";
```
- 在子元素样式中添加grid-area 属性来定位元素

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>Header</header>
        <main>Main Content</main>
        <aside>Sidebar</aside>
        <footer>Footer</footer>
    </div>
</body>
</html>

css 复制代码

/* 创建 Grid 容器 */
.container {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 两列布局，第一列占 1fr，第二列占 3fr */
    grid-template-rows: auto 1fr auto; /* 三行布局，第一行和第三行自适应高度，第二行占满剩余空间 */
    grid-template-areas: 
        "header header"      /* header 跨越两列 */
        "sidebar main"       /* sidebar 在第一列，main 在第二列 */
        "footer footer";     /* footer 跨越两列 */
    gap: 20px; /* 设置行间距和列间距 */
}

/* 分配每个区域的元素 */
header {
    grid-area: header;
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
}

main {
    grid-area: main;
    background-color: #e0e0e0;
    padding: 20px;
}

aside {
    grid-area: sidebar;
    background-color: #d0d0d0;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: #b0b0b0;
    padding: 20px;
    text-align: center;
}

效果：

4、`gap`/ `grid-gap` 设置网格项之间的间距

gap（现在的标准）和grid-gap（在较老的浏览器中使用）属性用于设置网格（Grid）项之间的间距。它们可以单独设置行间距（行与行之间的距离）和列间距（列与列之间的距离），也可以同时设置行间距和列间距。

作用：定义 Grid 项目之间的间距，可以同时设置行间距和列间距，或者单独设置。
语法：
css 复制代码
```
gap: <row-gap> <column-gap>;
```
- <row-gap>：设置行间距（行与行之间的间距）。
- <column-gap>：设置列间距（列与列之间的间距）。
- 如果只设置一个值，则 row-gap 和 column-gap 都使用该值。

注意事项：

gap 属性适用于 Grid 布局和 Flex 布局，所以它不仅能控制 Grid 容器项之间的间距，也适用于 Flex 容器中的项。
在较老的浏览器中，gap 可能不被支持（例如 Internet Explorer），但现代浏览器都已经广泛支持该属性。

5、`grid-column` / `grid-row`：控制元素在 Grid 中的定位

作用：控制 Grid 项目在行和列上的位置和跨度。
- grid-column 用于定义一个元素在水平（列）方向上的起始和结束位置。它指定了元素从哪个列开始，跨越多少列。它是一个简写属性，将 grid-column-start 和 grid-column-end 结合在一起
- grid-row 用于定义一个元素在垂直（行）方向上的起始和结束位置。它指定了元素从哪一行开始，跨越多少行。同样是一个简写属性，它将 grid-row-start 和 grid-row-end 结合在一起

语法：

css 复制代码

grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;

实例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 50px 50px 50px;
      gap: 10px;
    }

    .item1 {
      grid-column: 1 / 2;  /* 从第1列开始，到第2列结束 */
      grid-row: 1 / 2;     /* 从第1行开始，到第2行结束 */
      background-color: lightblue;
    }

    .item2 {
      grid-column: 2 / 4;  /* 从第2列开始，到第4列结束 */
      grid-row: 1 / 3;     /* 从第1行开始，到第3行结束 */
      background-color: lightcoral;
    }

    .item3 {
      grid-column: 1 / 2;  /* 从第1列开始，到第2列结束 */
      grid-row: 3 / 4;     /* 从第3行开始，到第4行结束 */
      background-color: lightgreen;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>
</body>
</html>

效果：

6、 `justify-items` / `align-items`：控制Grid项的对齐

在 CSS Grid 布局中，justify-items 和 align-items 是两个重要的对齐属性，用于控制网格项在主轴和交叉轴上的对齐方式。

作用：控制 Grid 项目在 Grid 单元格中的对齐方式。
- justify-items：控制项目在水平轴上的对齐，它影响的是每个网格项相对于其所在单元格的对齐方式，而不是整个Grid 容器本身的对齐方式。
- align-items：控制项目在垂直轴上的对齐，同样，它影响的是每个网格项相对于其所在单元格的对齐方式。

语法：

css 复制代码

justify-items: <alignment>;
  /* 
   start：网格项对齐到网格单元格的开始边缘 
   end：网格项对齐到网格单元格的结束边缘
   center 网格项在网格单元格中居中对齐
   stretch 网格项拉伸填满整个网格单元格（这是默认值）
 */
align-items: <alignment>;
/* 
   start：网格项对齐到网格单元格的顶部边缘 
   end：网格项对齐到网格单元格的底部边缘
   center 网格项在网格单元格中垂直居中对齐
   stretch 网格项拉伸填满整个网格单元格（这是默认值）
 */

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      justify-items: center;  /* 水平居中对齐每个网格项 */
      align-items: center;    /* 垂直居中对齐每个网格项 */
      gap: 10px;              /* 网格项之间的间距 */
    }

    .item {
      background-color: lightgreen;
      padding: 20px;
    }
  </style>
</head>
<body>

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

</body>
</html>

效果：

注意事项 ：与 justify-content 和 align-content 的区别
justify-items 和 align-items 是用于对齐网格项在各自单元格中的位置。而 justify-content 和 align-content 是用于对齐整个 Grid 容器中的内容。

7、`justify-content` / `align-content`控制整个 Grid 容器的对齐

作用：控制整个 Grid 容器内的项目如何在容器中对齐。
- justify-content：控制整个 Grid 容器中网格项在水平方向（主轴）上的对齐方式。这个属性影响的是整个容器的网格内容，而不是单个网格项。
- align-content：控制整个 Grid 容器中网格项在垂直方向（交叉轴）上的对齐方式。同样也只影响整个容器的网格内容。

语法：

css 复制代码

justify-items: <alignment>;
  /* 
	start：将网格内容对齐到容器的起始边缘
	end：将网格内容对齐到容器的结束边缘
    center 将网格内容水平居中对齐
	stretch 将网格内容拉伸以填充整个容器（默认值）
	space-between 在网格项之间平均分配空白，首尾项紧贴容器边缘
	space-around 在网格项之间平均分配空白，网格项两侧都有相等的空间
	space-evenly 在网格项之间平均分配空白，每个网格项之间的间距都相等
  */
align-items: <alignment>;
  /* 
    start：将网格内容对齐到容器的顶部
	end：将网格内容对齐到容器的底部
    center 将网格内容垂直居中对齐
	stretch 将网格内容拉伸以填充整个容器（默认值）
	space-between 在网格项之间平均分配垂直空白，首尾项紧贴容器的顶部和底部
    space-around 在网格项之间平均分配垂直空白，网格项的上下都有相等的空间
    space-evenly 在网格项之间平均分配垂直空白，每个网格项之间的间距都相等
 */

使用场景：
- 当网格项的总宽度或高度小于容器的宽度或高度时，justify-content 和 align-content 可以用来控制整个网格内容在容器中的对齐位置。
- 在有间距的情况下，它们可以用于控制网格项之间的空隙分配和对齐。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      justify-content: center;  /* 水平居中对齐整个网格 */
      align-content: center;    /* 垂直居中对齐整个网格 */
      gap: 10px;                /* 网格项之间的间距 */
      height: 500px;            /* 设置容器高度 */
    }

    .item {
      background-color: lightcoral;
      padding: 10px;
    }
  </style>
</head>
<body>

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

</body>
</html>

效果：

三、常见的 Grid 布局设计

1、简单的 2 列布局

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 3fr 1fr;
      grid-gap: 20px;
      height: 500px;
    }

    .main {
      background-color: aqua
    }

    .sidebar {
      background-color: blueviolet
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">Main content</div>
    <div class="sidebar">Sidebar</div>
  </div>

</body>
</html>

效果：

2、定制化的页面布局

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      height: 300px;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    }

    header {
      grid-area: header;
      background-color: aqua
    }

    main {
      grid-area: main;
      background-color: cornflowerblue
    }

    aside {
      grid-area: sidebar;
      background-color: chocolate
    }

    footer {
      grid-area: footer;
      background-color: darkkhaki
    }
  </style>
</head>

<body>
  <div class="container">
    <header>Header</header>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </div>

</body>
</html>

效果：

四、总结

CSS Grid 布局是现代网页设计中的重要工具，它允许开发者创建复杂的布局结构，且不需要借助浮动或复杂的定位技巧。Grid 布局的核心在于将页面区域分成"行"和"列"，并通过指定项的跨度与位置来控制布局。理解 CSS Grid 的基础概念和属性是掌握这一布局方法的第一步。

CSS Grid 布局：属性及使用详解

CSS Grid 布局：属性及使用详解

一、CSS Grid 布局的基础概念

二、主要的 CSS Grid 属性

1、display: grid / display: inline-grid声明 Grid 容器

2、grid-template-columns / grid-template-rowsGrid 容器中列和行的尺寸

3、 grid-template-areas命名布局区域

4、gap/ grid-gap 设置网格项之间的间距

5、grid-column / grid-row：控制元素在 Grid 中的定位

6、 justify-items / align-items：控制Grid项的对齐

7、justify-content / align-content控制整个 Grid 容器的对齐

三、常见的 Grid 布局设计

1、简单的 2 列布局

2、 定制化的页面布局

四、总结

1、`display: grid` / `display: inline-grid`声明 Grid 容器

2、`grid-template-columns` / `grid-template-rows`Grid 容器中列和行的尺寸

3、 `grid-template-areas`命名布局区域

4、`gap`/ `grid-gap` 设置网格项之间的间距

5、`grid-column` / `grid-row`：控制元素在 Grid 中的定位

6、 `justify-items` / `align-items`：控制Grid项的对齐

7、`justify-content` / `align-content`控制整个 Grid 容器的对齐

2、定制化的页面布局