Document

--- theme: smartblue --- ## grid的布局的使用 ### 0.flex布局痛点

* 当我使用到flex的属性:`justify-content`属性中 ` space-between;` `space-around` `space-evenly`属性值来处理空白区域的分布，最后一行可能会出现间隔过大的情况。 ```html Document

``` ### 1.gird是什么？ **CSS 网格布局**(Grid Layout) 是 CSS 中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行。 **gird(网格)** 布局与 **Flex** 弹性布局有相似之处理，都是由父容器包含多个项目元素的使用。 ### 2.兼容性下面是网格系统兼容性数据，你也可以在网站查看，所以在根据项目使用的场景决定是否使用网格布局。在2024的今天现在浏览器版本基本都是100以上，大可放心去使用但是如果你的客户还在使用用**IE**就尝试其他布局方式吧， **虽然IE已经没了**，不排除其他用户还在使用

### 3.声明容器 #### 1.块级容器

* **display: grid**; ```html Document xxxxxx ``` #### 2.行级容器

* **display: inline-grid;** ```html Document xxxxxx ``` ### 4.划分行列 * 网格有点类似表格，也 `行` 和 `列`。使用 `grid-template-columns` 规则可划分**列数**，使用 `grid-template-rows` 划分**行数**。 #### 1.固定宽度

* 我们划分了`3列` `3行` 元素 ```html

``` #### 2.百分比 * 可以使用使用百分比自动适就容器。

```css display: grid; grid-template-columns: 33.33% 33.33% 33.33%; // 三列 grid-template-rows: 50% 50%; // 两行 ``` #### 3.重复设置 * 使用 `repeat` 统一设置值，第一个参数为重复数量，第二个参数是重复值

```html Document

``` * 可以设置多个值来定义重复，下面定义四列` 100px 50px`重复排列。

```css display: grid; grid-template-rows: repeat(2, 50%); grid-template-columns: repeat(2, 100px 50px); ``` **注意**：`repeat` 函数第一个参数是重复几次后面的值\*\*个数 \*\*是他循环重复次数，如上面 `grid-template-columns: repeat(2, 100px 50px);` 就展示了4列公式：`重复次数 * 参数的个数=2*2 =4` #### 4.自动填充 * 自动填充是根据容器尺寸，自动设置元素尺寸。

```html Document

``` #### 5.比例划分 ##### 1. 单位组合 * 使用 `fr` 单位设置元素在空间中所占的比例，下面按`1份-2份` 分成两组共四列。

```css width: 300px; height: 200px; display: grid; grid-template-rows: 1fr 2fr; grid-template-columns: 100px 1fr 2fr; ``` ##### 2.重复定义

```css width: 300px; height: 200px; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2,1fr,2fr); ``` #### 6.自动空间 * 下面为第二个网格列使用`auto`来让其获取所有剩余空间

```html

auto

``` #### 7.组合定义 `grid-tempalte` 是 `grid-template-rows`、`grid-template-columns`、`grid-template-areas` 的三个属性的简写。下面使用`grid-template`实现二行三列的布局

```html

``` 下面是使用 `grid-template` 同时声明 `grid-template-rows、grid-template-columns`。

```html

``` * 下面是使用`grid-template` 定义 `grid-template-areas` ，有关`grid-template-areas`的使用方法会在下面介绍。

```html

``` #### 8.最大最小值使用 `minmax` 方法可以设置取值范围，下列在行高在 `最小50px ~ 最大1fr` 间取值。

```html

``` ### 5.间距定义 #### 1.行间距使用 `row-gap` 设置行间距。

```css width: 300px; height: 200px; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); row-gap: 30px; ``` #### 2.列间距使用 `column-gap` 设置行间距。

#### 3.组合定义 * 使用 `gap` 规则可以一次定义行、列间距，如果间距一样可以只设置一个值。 * **设置行列间距为 20px 与 10px**

```css width: 300px; height: 200px; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); gap: 20px 10px; ``` **统一设置行列间距为 20px**

**最终占满4个格子** ```html Document ``` #### 4.根据网格命名在第7小节 **网格命名**中**独立命名**查看 #### 5.根据自动命名在第7小节 **网格命名**中**自动命名**查看 #### 6.简写模式可以使用 `grid-row` 设置行开始网格线，使用 `grid-column` 设置结束网格线。上例中的**垂直水平居中对齐元素**，可以使用以下简写的方式声明（推荐）。

```css grid-column: 2/3; grid-row: 2/3; ``` #### 7.更加简写的模式 `grid-area`更加简洁是同时对 `grid-row` 与 `grid-column` 属性的组合声明。语法结构如下： grid-area:grid-row-start/grid-column-start/grid-row-end/grid-column-end。上例中的**垂直水平居中对齐元素**，可以使用以下简写的方式声明 ```css grid-area:2/2/3/3 ``` #### 8.实现类似于bootstrap的布局下面是 bootstrap 网格系统的开发，根据指定的样式自动设置网格大小。我把一列画成12列 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c6b0fbb3649c492bb6f9ca6ed8f2dba5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6I-cNzA3:q75.awebp?rk3s=f64ab15b&x-expires=1748452199&x-signature=htgO2NMgdFoJ48GpGhFkYkhDfBE%3D) ```html Document

``` ### 7.网格命名网格线可以使用命名与编号找到，方便控制指定网格，或将内容添加到指定网格中。

#### 1.独立命名可以为每个网格独立命名来进行调用。我们让元素跑到中间去我创建一个3行3列的网格

```html Document ``` #### 2.自动命名上面那种方式过于麻烦了，创建一个列或者行就要给名字，我们用重复函数repeat来实现

```html ``` ### 8.区域定位其实在第6小节的元素定位提到过，在这里我们在这里详细在讲讲，通过 `grid-area` 属性可以将元素放在指定区域中。`grid-area`由`grid-row-start`、`grid-column-start`、`grid-row-end`、`grid-column-end` 的简写模式。 #### 1.编号定位下例中将元素放在容器的中心位置中的网格中

```html Document ``` #### 2.命名定位同样是上面的例子可以使用网格线命名来附加元素。 ```html Document ``` ### 9.区域声明区域是由多个单元格构成，使用 `grid-template-areas`可以定义网格区域，**并且网格区域必须是矩形的**。 #### 1.区域布局下面是使用栅格区域布局移动端页面结构

```html

``` #### 2.简写形式使用 grid-template 进行栅格划分会更简洁。语法格式为： grid-template: '栅格名称栅格名称栅格名称栅格名称' 行高 '栅格名称栅格名称栅格名称栅格名称' 行高 '栅格名称栅格名称栅格名称栅格名称' 行高/列宽列宽列宽列宽;

下面是使用 grid-template 进行简写的示例 ```html

``` #### 3.区域命名(系统自动命名) 系统会为区域自动命名，上例中的会产生 `header-start` 水平与垂直同名的起始区域与 `header-end`水平与垂直同名的区域终止。

```html

``` #### 4.区域占位使用一个或多个连续的`.` 定义区域占位。

```html

``` ### 10.网格流动在容器中设置`grid-auto-flow` 属性可以改变单元格排列方式。 | 选项 | 说明 | | :----: | :-----------------: | | column | 按列排序 | | row | 按行排列 | | dense | 元素使用前面空余栅格（下面有示例说明） | #### 1.基本使用下例将单元按列排序流动

```html

``` #### 2.强制填充当我们布局的时候有些空隙这个时候

```html ...

``` 当元素在栅格中放不下时，将会发生换行产生留白，使用`grid-auto-flow: row dense;` 可以执行填充空白区域操作。我们可以使用 \*\*grid-auto-flow: row dense; \*\*

```css article { width: 400px; height: 400px; display: grid; grid-template-rows: repeat(2, 100px); grid-template-columns: repeat(2, 100px); border: solid 5px silver; grid-auto-flow: row dense; } ``` ### 11.对齐管理可以通过属性方便的定义栅格或元素的对齐方式 | 选项 | 说明 | 对象 | | :-------------: | :--------------------------: | :------: | | justify-content | 所有栅格在容器中的水平对齐方式，容器有额外空间时 | 栅格容器 | | align-content | 所有栅格在容器中的垂直对齐方式，容器有额外空间时 | 栅格容器 | | align-items | 栅格内所有元素的垂直排列方式 | 栅格容器 | | justify-items | 栅格内所有元素的横向排列方式栅格内所有元素的横向排列方式 | 栅格容器栅格容器 | | align-self | 元素在栅格中垂直对齐方式 | 栅格元素 | | justify-self | 元素在栅格中水平对齐方式 | 栅格元素 | #### 1.网格对齐 justify-content 与 align-content 用于控制栅格的对齐方式，比如在栅格的尺寸小于容器的里面时，控制栅格的布局方式。 justify-content 属性的值如下 | 值 | 说明 | | :-----------: | :----------------------------------: | | start | 容器左边 | | end | 容器右边 | | center | 容器中间 | | stretch | 撑满容器 | | space-between | 第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间 | | space-around | 每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍 | | space-evenly | 栅格间距离完全平均分配 | align-content 属性的值如下 | 值 | 说明 | | :-----------: | :----------------------------------: | | start | 容器顶边 | | end | 容器底边 | | center | 容器垂直中间 | | stretch | 撑满容器 | | space-between | 第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间 | | space-around | 每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍 | | space-evenly | 栅格间距离完全平均分配 |

```css border: solid 5px silver; width: 600px; height: 600px; display: grid; grid-template-columns: 200px 200px; grid-template-rows: 200px 200px; justify-content: space-between; align-content: space-evenly; ``` 下面是栅格水平与垂直居中对齐的示例

``` Document

``` #### 2.元素对齐 justify-items 与 align-items 用于控制所有栅格内元素的对齐方式 * justify-items 用于控制元素的水平对齐方式，可用的属性值如下 | 值 | 说明 | | :-----: | :-------: | | start | 元素对齐栅格的左边 | | end | 元素对齐栅格的右边 | | center | 元素对齐栅格的中间 | | stretch | 水平撑满栅格 | * align-items 用于控制元素的垂直对齐方式，可用的属性值如下 | 值 | 说明 | | ------- | ----------- | | start | 元素对齐栅格的顶边 | | end | 元素对齐栅格的底边 | | center | 元素对齐栅格的垂直中间 | | stretch | 垂直撑满栅格 | 下面是将元素在所在栅格中水平、垂直居中的示例

```html Document

``` #### 3.元素独立控制 justify-self 与 align-self 控制单个栅格内元素的对齐方式，属性值与 justify-items 和 align-items 是一致的。 ![](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7d225d34338c4ce187a73cdd81b1ab1e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6I-cNzA3:q75.awebp?rk3s=f64ab15b&x-expires=1748452199&x-signature=eMvFwCzDXF99n5fa%2BvkcVGdx00Q%3D) ```css div:first-child { justify-self: end; align-self: center; } div:nth-child(4) { justify-self: start; align-self: center; } ``` #### 4.组合简写 ##### 1.place-content 用于控制栅格的对齐方式，语法如下： ```css place-content:

``` ##### 2.place-items 控制所有元素的对齐方式，语法结构如下： ```css place-items:

``` ##### 3.place-self 控制单个元素的对齐方式 ```css place-self:

``` ### 12.自动排列当栅格无法放置内容时，系统会自动添加栅格用于放置溢出的元素，我们需要使用以下属性控制自动添加栅格的尺寸。 #### 1.属性说明 | 选项 | 说明 | 对象 | | ----------------- | ------------------------------------- | -- | | grid-auto-rows | 控制自动增加的栅格行的尺寸，grid-auto-flow:row; 为默认 | 容器 | | grid-auto-columns | 控制自动增加的栅格列的尺寸，grid-auto-flow: column; | 容器 | #### 2.自动栅格行下面定义了 2X2 的栅格，但有多个元素，系统将自动创建栅格用于放置额外元素。我们使用 grid-auto-rows 来控制增加栅格的行高。 * 如果没有定义溢出的高度或宽度，盒子宽/高根据自身内容而来 * 未设置溢出高度或宽度

* 设置溢出高度

```html Document

``` * 我们将改变单元格排列方式。 * grid-auto-flow: column;

```html Document

``` #### 3.自动行列下面创建了 2X2 栅格，我们将第 2 个 DIV 设置的格栅已经超过了2行2列，所以系统会自动创建栅格。第2个DIV已经是200x200了

```html Document

```