赞
踩
display: grid;
grid-template-rows:100px 100px 100px; (分三行,每行高100px)
grid-template-columns:100px 100px 100px;(分三列,每行高100px)
可简写为:
grid-template-rows: repeat(3,100px );
grid-template-columns: repeat(3,100px );
行的高度、列的宽度可用百分比。
grid-template-columns: repeat(X,Y...... );
宽或高可以写多个,则以一组为循环,循环X次。
行:grid-template-rows: repeat(auto-fill,100px); (设置grid的行 auto-fill自动填充)
列:grid-template-columns: repeat(auto-fill,Y.....) ;
(设置grid的列 后面有几个值就表示有几列,每一个值表示列的宽度。)
以Y宽度或多个宽度为循环,每个项目填充循环
gap: X Y; (X为行之间的间距,Y为列之间的间距)
grid-auto-flow: row;
默认,项目的平铺顺序是 先行后列的。 即先填满第一行,然后换行,填第二行。
grid-auto-flow:column;
更改方向: column 先列后行。
- justify-content:center;
- align-content: center;
justify-content 和 align-content默认值都为 flex-start或start(end同理)
其用法同弹性盒子
容器:600*600 项目:100*100
- justify-items:enter;
- align-items:center;
justify-itemst 和 align-items 默认值都为 flex-start或start(end同理)
容器:600*600 项目双类名: 200*200 100*100(100相对与200实现对齐)
fr 片段 将整体分为n分,1fr = 整体的1/n
- display:grid;
- grid-template-rows:100px 2fr 1fr;
- grid-template-columns:repeat(3,100px);
- justify-content:center;
- align-content:center;
容器:600*600 此中fr=(600-100)/3
- .item1{
- background-color: rgb(150, 36, 36);
- grid-column-start: 1;
- grid-column-end: 3;
- grid-row-start: 1;
- grid-row-end: 2;
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。