grid布局笔记

容器网格布局:
display: grid
display: inline-grid;

行高和列宽:
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
33.33% 33.33% 33.33%
repeat(3, 33.33%)
repeat(2, 100px 20px 80px)
repeat(auto-fill, 100px)
1fr 1fr
150px 1fr 2fr
1fr 1fr minmax(100px, 1fr)
100px auto 100px

行间距
row-gap: 20px;
列间距
column-gap: 20px;
间距
gap: ; 如:grid-gap: 20px 20px;
省略了第二个值,浏览器认为第二个值等于第一个值

网格线名称
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]
网格布局允许同一根线有多个名字,比如[fifth-line row-5]

区域名称:
grid-template-areas
grid-template-areas: ‘a b c’
‘d e f’
‘g h i’;
grid-template-areas: ‘a a a’
‘b b b’
‘c c c’;
grid-template-areas: “header header header”
“main main sidebar”
“footer footer footer”;
grid-template-areas: ‘a . c’
‘d . f’
‘g . i’;

排列方式:
grid-auto-flow: column;
row [dense]
column [dense]

单元格内容:
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: ; 如果省略第二个值,则浏览器认为与第一个值相等

整个内容区域在容器里面的水平位置
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: ; 如果省略第二个值,浏览器就会假定第二个值等于第一个值

grid-auto-columns grid-auto-rows现有网格的外部的单元格尺寸,写法与grid-template-columns和grid-template-rows完全相同
不指定这两个属性,浏览器完全根据单元格内容的大小决定

例如下面的条目可以超出现有3乘3网格
grid-row-start: 4;
grid-column-start: 2;

grid-auto-columns: 50px;
grid-auto-rows:50px;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值