grid布局属性总结

Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。

容器的属性

属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII描述
display属性指定容器采用grid布局
grid-template-columns指定每一列的列宽 属性值详解
grid-template-rows指定每一行的行高
grid-template-areas定义区域属性详解
grid-templategrid-template-columnsgrid-template-rowsgrid-template-areas这三个属性的合并简
grid-column-gap列间距;单位px,em等
grid-row-gap行间距
grid-gapgrid-column-gapgrid-row-gap缩写
grid-auto-flow指定排序规则
justify-items设置单元格内容的水平位置(左中右)
align-items设置单元格内容的垂直位置(上中下)
place-itemsalign-items属性和justify-items属性的合并简写形式
justify-content整个内容区域在容器里面的水平位置(左中右)
align-content整个内容区域的垂直位置(上中下)
place-contentalign-content属性和justify-content属性的合并简写形式
grid-auto-columns多余网格的列宽
grid-auto-rows多余网格的行高
gridgrid-template-columnsgrid-template-rowsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow这六个属性的合并简写

项目的属性

属性 llllllllllllllIIIIIIIIIIIIIIIIIIIIIIII描述
grid-column-start左边框所在的垂直网格线
grid-column-end右边框所在的垂直网格线
grid-columngrid-column-startgrid-column-end的合并简写
grid-row-start上边框所在的水平网格线
grid-row-end下边框所在的水平网格线
grid-rowgrid-row-start属性和grid-row-end的合并简写
grid-area指定项目放在哪一个区域,还可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end的合并简写
justify-self设置单元格内容的水平位置(左中右)
align-self设置单元格内容的垂直位置(上中下)
place-selfalign-self属性和justify-self属性的合并简写


属性详解

单位解释:

grid-template-columns
grid-template-rows
值:
px、em等单位,可以是百分比;
repeat()函数,repeat函数接收两个参数,第一个是要重复的次数(可以是auto-fill),第二个参数是要重复的值;
fr(片段),把容器分成片段;
minmax()函数,最小值最大值;
auto关键字,表示由浏览器自己决定长度
网格线名称,使用方括号,指定每一根网格线的名字

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

grid-template-columns属性解释
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值