码迷,mamicode.com
首页 > 其他好文 > 详细

grid layout

时间:2018-09-24 21:44:58      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:长度   次数   宽度   art   相等   rem   out   tar   使用   

首先,你必须使用 display:grid 将容器元素定义为一个 grid(网格) 布局,使用 grid-template-colunms 和  grid-template-rows 设置 列 和 行 的尺寸大小,然后通过 grid-colunm 和 grid-row 将其子元素放入这个 grid(网格) 中。

grid-template-colunms:是设置整个网格的每列的宽度.

grid-template-rows:是设置整个网格的每行的高度.

frl相当与一个长度单位

1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3;

repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数:第一个参数定义网格轨道应该重复的次数,第二个参数定义每个轨道的尺寸。

 grid-colunm:x/y设置从哪列到哪列;

 grid-row:x/y设置从哪行到哪行;

grid-area:如果指定四个值,第一个值对应grid-row-start,第二个值对应grid-column-start,第三个值对应grid-row-end,第四个值对应grid-column-end

 grid-template-areas

 

grid layout

标签:长度   次数   宽度   art   相等   rem   out   tar   使用   

原文地址:https://www.cnblogs.com/likaibei/p/9696791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!