目录
容器属性
项目属性
参考twdtttgrid教程:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性
容器属性设为grid布局:display: grid;
间隔:gap:10px 等价于 row-gap:10px ;column-gap:10px; 简写为:gap:10px 10px ;
gap:5px 10px 等价于row-gap:5px ;column-gap:10px ;
设为3列平均分布:grid-template-columns: 1fr 1fr 1fr; 或者:grid-template-columns: repeat(3, 1fr);
设为3行按比例分布:grid-template-rows: 1fr 2fr 50px;
justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)。
justify-items: start | end | center | stretch;align-items: start | end | center | stretch;justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-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;项目属性 grid-column-start属性:左边框所在的垂直网格线grid-column-end属性:右边框所在的垂直网格线grid-row-start属性:上边框所在的水平网格线grid-row-end属性:下边框所在的水平网格线
以上示例中,item1的内容可为:(以下4个红框中的内容是等价的)
justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。
align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。
justify-self: start | end | center | stretch;align-self: start | end | center | stretch;