css:Grid网格布局常用属性

1、指定容器使用网格布局: display: grid

2、指定容器设为行内元素并使用网格布局: display: inline-grid

3、定义每一列的列宽:grid-template-columns

4、定义每一行的行高:grid-template-row

5、重复赋值:repeat(次数,值)

6、自动填充:如:repeat(auto-fill,30px)

7、比例:fr(如 grid-template-columns: 1fr 2fr;意思是容器分为2列,二列的宽度是一列的2倍)

8、长度范围:minmax()

9、自动填充剩余空间(不设置最大值最小值的情况下):auto

10、网格线名称,同一根线可以有多个名称: grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];

11、行间距:grid-row-gap

12、列间距:grid-column-gap

13、间距:grid-gap:行间距数值 列间距数值行间距和列间距数值相同可只写一个值

14、区域:b到h的分别对应七个区域。.表示第一个区域不用;h表示两个区域合并;每个区域的起始网格线自动命名为区域名-start,终止网格线自动命名为区域名-end

grid-template-areas: '. b c'
                     'd e f'
                     'g h h';

15、填充顺序:grid-auto-flow默认是row,即先填满第一行再填下一行;也可设置为column变成先填满第一列再填第二列;row densecolumn dense表示尽量填满不出现空白

16、单元格内容的水平位置、垂直位置;默认stretch,即填满整个单元格

justify-items: start | end | center | stretch;/*水平位置*/
align-items: start | end | center | stretch;/*垂直位置*/
place-items: '水平位置' '垂直位置';/*参数相同可只写一个值*/

17、内容块在网格容器的水平位置、垂直位置;默认stretch,即填满整个单元格

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
place-content:'水平位置' '垂直位置';/*参数相同可只写一个值*/
space-around  : 单元格两侧的间隔相等,是单元格与容器边框的间隔的两倍。
space-between : 单元格间隔相等,单元格与容器边框之间没有间隔。
space-evenly  : 单元格间隔和单元格与容器边框的间隔相等,。

18、指定项目外的单元格属性:grid-auto-columnsgrid-auto-rows

19、合并属性

grid-template: grid-template-columns grid-template-rows  grid-template-areas
grid: grid-template-rows grid-template-columns grid-template-areas  grid-auto-rows grid-auto-columns grid-auto-flow

20、项目根据网格线定位,可使用z-index

grid-column-start:2;
grid-column-end:3;
/*相当于*/
grid-column:2 / 3

grid-row-start:4;
grid-row-end :5;
/*相当于*/
grid-row: 4 / 5

21、指定项目放在哪一个区域: grid-area: a; grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

22、设置单元格内容的水平、垂直位置,只作用于单个项目

justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
justify-self: start | end | center | stretch;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值