【Grid布局】让你5分钟拿下

阳光穿透心脏的1/2处 2022-12-09 02:41 273阅读 0赞

## 内容 ##

> Grid 布局基本介绍  
> Grid 布局属性展示

## 1. Grid 布局 ##

Grid 布局（网格布局）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]  
此图使用其他布局做起来着实磨人，但这正是 Grid 布局的杰作

`Flex 布局是轴线布局`，只能指定"项目"针对轴线的位置，可以看作是`一维布局`。`Grid 布局则是将容器划分成"行"和"列"`，产生单元格，然后指定"项目所在"的单元格，可以看作是`二维布局`。Grid 布局远比 Flex 布局强大。了解 Flex布局：[Flex布局详解][Flex]。

**Grid 布局图解**：

![Grid 布局图解：][Grid]

## 2. 属性介绍 ##

同很多布局一样，Grid 布局也分为 容器(container) + 项目(item)；所以属性就存在：容器属性 + 项目属性。值得庆幸的是：所有的列属性均有行属性与之对应且属性值一致

##### 2.1 容器属性 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]  
①：`grid-template-columns` 控制列模板

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 2]

display: grid;
        grid-template-columns: 100px 100px 100px;
        /*表示四行三列，且每个盒子都是100 * 100*/
        grid-template-rows: 100px 100px 100px 100px;

常见属性值：

*  `repeat(x,y)` x 表示重复的此数，y表示重复的值。 （grid-template-columns: 100px 100px 100px;=> grid-template-columns: repeat(3, 100px)）
 *  `repeat(auto-fill,100px)` 单元格大小固定，但容器大小不确定，此属性会自动填充  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 3]
 *  `repeat(4,1fr)` `fr` 关键字表示网格布局的比例关系。表示宽度平分为四份；等价于 1fr,1fr,1fr,1fr  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 4]
 *  `minmax()` 函数产生一个长度范围，表示长度就在这个范围之中，他接受两个参数，分别是 `最小值、最大值` （此处表示两列，一列占宽一半；一列最小占 150px，最大占一份）
 *  `auto` 表示由浏览器自己决定： grid-template-columns: 100px auto 100px; （表示两边100px，中间自适应）

②：`grid-template-areas` 把容器 `任意划分为不同的区域`。

grid-template-areas: 'a a a' 'b b b' 'c c c';

注意：此属性要配合项目属性一起使用，具体见项目属性

③：`column-gap`、`row-gap`、`gap` 控制 item（项目）之间的相互距离；gap 为 `column-gap`、`row-gap` 的复合属性

/*column-gap: 20px; row-gap: 20px;*/
        gap: 20px;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 5]  
④：`justify-items`、`align-items` 、`place-items` 设置 `单元格内容` 水平和垂直对齐方式；place-items 为 复合属性（属性值：start,end,center,strech）

/* justify-items: center; align-items: center; */
        place-items: center;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 6]  
注意：它控制的是单元格内容

⑤：`justify-content`、`align-content` 设置 `整个内容区域` 水平垂直对齐方式；（属性值：start,end,center,strech,space-around,space-between,space-evenly）

justify-content: center;
        align-content: center;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 7]  
注意：此处控制的是整个内容区域

⑥：`grid-auto-columns`、`grid-auto-rows` 设置 `多出来的项目` 的宽和高

示例：设置了 3\*3 的项目，但实际有 10 个项目，此时属性就用来设置多出来的项目

grid-template-columns: repeat(3, 100px);
    	grid-template-rows: 100px 100px 100px;
        grid-auto-rows: 150px;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 8]

##### 2.2 项目属性 #####

![在这里插入图片描述][20200921174308703.png_pic_center]

了解项目属性之前就要对网格线做下了解，网格线让 Grid 布局更加强大  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 9]  
注意：网格线数永远比 item 项大 1；即 `3*3` 项目就有 `4*4` 的网格线与之对应

①：`grid-column-start`、`grid-column-end`、`grid-row-start`、`grid-row-end` 、`grid-column(列复合属性)` 用来设置 `item 的具体位置` 依据在哪跟网格线

示例：

/*grid-column-start: 1; grid-column-end: 3;*/
        grid-column: 1/3;

表示 item 在一行上所占空间为：从第一条线->第三条线

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 10]  
注意：使用此属性时，请确保有指定范围的网格线

②：`grid-column-start:span 3` 往右边扩三格 === `grid-column-end:span 3` 往左边扩三格

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 11]  
③：`grid-area` 设置项目占的区域（区域由容器任意分配）

/*容器属性*/
    grid-template-areas: 'a a a' 'b b b' 'c c c' 'd d d';
    /*项目属性*/
    grid-area: b;

表示此项目把 b 区域全部占完

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 12]  
③：`grid-area` 可对 `grid-column-start`、`grid-column-end`、`grid-row-start`、`grid-row-end` 进行简写

/* grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; */
        grid-area: 1/1/3/3;

注意：注意对应关系为：先 start 后 end

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 13]  
注意：第 10 个项目拉伸的原因是，我们在开始时就设置的是 `3 * 4` 的项目，多出的自适应  
④：`justify-self`、`align-content`、`place-self(复合写法)` 设置 `单元格内容` 水平垂直对齐方式，跟 `justify-items` 用法完全一致，但`只作用于单个项目`。

/* justify-self: center; align-content: center; */
        place-self: center;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 14]

## OVER ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/4e4160fbed9143198fd82c6fbc49ab54.png
[Flex]: https://blog.csdn.net/cwq521o/article/details/105754444
[Grid]: /images/20221123/2353fb658024480aa84848c3aefdc7c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6a9a9b91f9fe4397bd87d51635d6adeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/e8d909cf34514f2dae0a11da0669f394.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/8bad58d84e2447d4b777242e85c297d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/70360820fa5c4805a81d05b069924d6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/b2b406a88da44dcda2ef096bb93553bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/6395faba82684f6f9c6f385882df113b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/abf3a9c400d24f94a9bf674c5f08f09a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/66e24dc954a3430188af0fc85767cce1.png
[20200921174308703.png_pic_center]: /images/20221123/ad52e1b161c0440885df0e18b64f7f6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/9249050ac773439aafbe8cbd8889d2bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/822bb5ff6264461bbda19e5a4af20672.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/df5b2e9bf9f741dba107a30311f2a47c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/669cc9b6c2cb401e98c34360b06d0f21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/a5222e1f303448ae9eb732fd6459f51b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/190239ac723c42cc850684a73795c62a.png