GRID布局
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局
Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
![7caa43f31b6df925afe0bb7a0d2bfc6a.png](https://i-blog.csdnimg.cn/blog_migrate/05ae496b649f83f61e5aa9947f835a5e.jpeg)
grid布局预热
- 容器和项目
<
- 行和列
![2e283f5c6ea1b64442786bcc0cc0b972.png](https://i-blog.csdnimg.cn/blog_migrate/beef5ccc861aa6f6b096e2a2bc8a08f1.png)
容器里面的水平区域称为"行",垂直区域称为"列"。
- 单元格
![106ad799bdc461a24d5f23af279172a0.png](https://i-blog.csdnimg.cn/blog_migrate/c7fd165b1121e44777030401de9b1a8a.png)
行和列的交叉区域,称为"单元格"。
- 网格线
![c5806da307d8dcc024e0c27b3890476b.png](https://i-blog.csdnimg.cn/blog_migrate/86b25c6ac5f283698eb973536c25b774.png)
划分网格的线,称为"网格线"。水平网格线划分出行,垂直网格线划分出列。
GRID属性
容器属性:添加在容器元素
1、启动网格布局
display
2、划分行和列
grid-template-columns
-
- 属性值:绝对大小(根据列数或者行数确定值的个数) 例:200px 200px 200px
grid-template-columns
![f77e7bf0e9b6b7d3d1f7b89d24bb0c5c.png](https://i-blog.csdnimg.cn/blog_migrate/575dc8d366d19328a05e84d7064bfadd.png)
-
- 属性值:百分比(根据列数或者行数确定值的个数) 例:33.33% 33.33% 33.33%
grid-template-columns
![7eb451102b2e12c64e5eb9468bcfd15c.png](https://i-blog.csdnimg.cn/blog_migrate/d76f787494c68411dfc3e28447ad00f0.png)
-
- 功能函数:repeat()
repeat
-
- auto-fill关键字( 自动填充 )
grid-template-columns
![373394d4a4f448e303a84555c051b0f6.png](https://i-blog.csdnimg.cn/blog_migrate/432966794ce273ad19847f782552b6e9.png)
- fr关键字(列宽片段)
为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。
grid-template-columns
![637def0cb44247d88565bd88e7926f57.png](https://i-blog.csdnimg.cn/blog_migrate/f996ff7fced25b045bb7a35569bdf625.jpeg)
-
- minmax() 功能函数
grid-template-columns
-
- auto 关键字 自动填充
grid-template-columns
![2c308fbd727de6ad81635e1bad1d1839.png](https://i-blog.csdnimg.cn/blog_migrate/0f1cab1aa0e6a880f384e3a36de77c45.png)
-
- 网格线名称
grid-template-columns
3、设置行间距 || 列间距
grid-row-gap
![7b012f8e814ba655b3576c0eac38cfca.png](https://i-blog.csdnimg.cn/blog_migrate/d94d836ba1acebb53684ad1ce30d73ab.png)
- 指定"区域"(area),一个区域由单个或多个单元格组成。
display
display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
grid-template-areas: 'a a a'
'. . b'
'. c c';
![074b99e64a56375470f0883c68fcda42.png](https://i-blog.csdnimg.cn/blog_migrate/1f601b0d8fe0488a2ed6efe284631310.png)
5、规划子元素放置的顺序(默认为先排行后排列)
grid-auto-flow
6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式
justify-items
![bbb1960c16f6b3795f79dd0238a1d4a1.png](https://i-blog.csdnimg.cn/blog_migrate/d8f4c9053ea0a26d7f779d336cd1eeb2.png)
7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式
justify-content
![477717aaf57304269baf1e6a71122467.png](https://i-blog.csdnimg.cn/blog_migrate/5be470c75f873626e27f558d8a6b7a4b.png)
项目属性:添加在子元素上面
- 指定项目的四个边框,分别定位在哪根网格线。
grid-column-start
grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;
![f093672660d38d11ffab5053a1725f8f.png](https://i-blog.csdnimg.cn/blog_migrate/56672a15476f2a27313cd9e801f19c1c.png)
2、grid-column , grid-row
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-column: 1 / 3;
grid-row: 1 / 2;