博客列表 >grid布局常用属性

grid布局常用属性

无名小辈
无名小辈原创
2022年07月23日 23:23:39902浏览

1、创建grid容器

  1. display:grid;

2、设置容器中单元格的数量

  1. grid-template-rows: repeat(3,10em);
  2. grid-template-columns: repeat(3,10em);

3、排列顺序

  1. /* 按照列排序 */
  2. grid-auto-flow: column;
  3. /* 按照行排序 */
  4. grid-auto-flow: row;

4、项目超出单元格设定数量时,超出部份,行和列的显示方式

  1. /* 超出部份,行设置为10em */
  2. grid-auto-rows: 10em;
  3. /* 超出部份,列设置为10em */
  4. grid-auto-columns: 10em;

5、每个单元格之间的间距

  1. /* 行间距,列间距 */
  2. gap:5px 10px;

6、项目相对于容器,剩余空间的分配方式,垂直排列、水平排列

  1. /* 顶部对齐、居中对齐 */
  2. place-content: start center;
  3. /* 两端对齐,分散对齐 */
  4. place-content: space-between space-around;

7、项目相对于单元格,垂直排列、水平排列

  1. place-items: end center;

8、项目占用单元格的数量,行开始,列开始,行结束,列结束

  1. grid-area: 2 / 2 / span 2 / span 3;

9、单独设置项目,相对于单元格的对齐方式

  1. place-self: start center;
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议