首页 > 代码库 > css grid 随笔
css grid 随笔
原文出自Arien的博客 https://www.w3cplus.com/css3/line-base-placement-layout.html
首先定义一个网格
1.可以给父容器的display
属性设置为grid
或者inline-grid
来定义一个网格。这样你就可以使用grid-template-columns
和grid-template-rows
属性来创建一个网格。
.wrapper { display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; }
指定了列宽、列间距,行高和行间距等。
2.网格线的简写方式,其实就是grid-column
和grid-row
的start
与end
值合并在一起,两者之间用/
来分隔。
.a{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; }
可简写为
.a{ grid-column: 1 / 2; grid-row: 1 / 2; }
3.在CSS Grid Layout中有一个关键东东,网格区域grid-area
。
网格区域他是由四条网格线组成的一个空间。
组成网格区域的网格线顺序是row-start/column-start/row-end/column-end
。每个网格线之间也是使用/
来分隔。
.a{ grid-area: 1 / 1 / 2 / 2; }
css grid 随笔
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。