Grid布局https://www.cnblogs.com/cythia/p/10894598.html
1. 概述
网格布局可以算得上是CSS最强大的布局方案了。
它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。
2. 与flex布局的区别
- 弹性布局(flex):是轴线布局(一维布局)
- 网格布局(grid):是将容器划分成行和列,产生单元格,然后指定项目所在的单元格(二维布局)
3. fr
为了方便表示比例关系,网格提供了fr关键字(fraction的缩写,意为“片段”),如果两列的宽度分别为1fr和2fr,就表示后者是前者的2倍
4. 总结:
1.容器和项目
1.1 行、列和单元格
1.2 网格线
A. 容器属性
2 容器属性
2.1 display:grid 属性
2.2 display:inline-grid效果
3 grid-template-columns 和 grid-template-rows
3.1 repeat
3.2 auto-fill
3.3 fr
3.4 minmax
3.5 auto关键字
4 grid-row-gap和grid-colunm-gap属性
4.1 grid-row-gap:设置行与行之间的间隔
4.2 grid-colunm-gap:设置列于列之间的间隔
注:grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap
5 grid-auto-flow
6 justify-items、align-items 、place-items 和 place-item属性
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>
7 justify-content、align-content和place-content
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
B.项目属性
1. grid-colunm-start属性
2. grid-colunm-end属性
3. grid-row-start属性
4. grid-row-end属性