-
repeat()
--跟踪列表的重复片段,允许大量显示重复模式的列或行以更紧凑的形式编写
语法
grid-template-columns:repeat(repeat,values);
grid-template-rows:repeat(repeat,values);
参数说明
repeat:<number> | auto-fill | auto-fit
number:列的宽度或行的高度,可以为fr,px,%,max-content,min-content,auto等
auto-fill:以网格项为准自动填充,即当宽度够时,自动在列上填充空的单元格。
auto-fit:以网格容器为准自动填充。
注意
1,auto-fill和auto-fit必须结合minmax()使用才生效,具体数值是无效的。
例:repeat(auto-fill,minmax(100px,300px));
2,只适用于grid-template-columns和grid-template-rows
查看全部 -
grid-auto-columns/grid-auto-rows
--指定自动生成的网络轨道(又名隐式网络轨道)的大小,即当我们创建的行或列不够时,自动填充行或列的即是隐式网络轨道。
grid-auto-flow
--控制自动布局算法的工作方式
语法
grid-auto-flow:row | column | row dense | column dense;
(不建议使用,因为不好控制)
查看全部 -
grid-template简写例子
查看全部 -
Grid布局的优势
1:固定或弹性的轨道尺寸
2:定位项目
3:创建额外的轨道来保存内容
4:控制重叠内容(z-index)
查看全部 -
justify-content——单元格沿行轴对齐,align-content——单元格沿垂直行轴方向对齐。
值:stretch(默认)、start、end、center、space-around、space-between、space-evenly。
合并:place-content: <align-content> <justify-content>;
查看全部 -
display:grid(用得最多) | inline-grid | subgrid;
inline-grid——行内网格。
subgrid——如果网格容器本省时网格项(嵌套网格容器),此属性用来继承父级网格属性,目前存在兼容性问题。
当元素设置了网格布局,column、float、clear、vertical-align属性无效。
查看全部 -
Grid与Flexbox
查看全部 -
Grid布局的优势
查看全部 -
可能是兼容问题,我也设置了:grid-template-columns: 10% 200px auto 3fr 2fr;以后,显示出来的效果是:中间的auto那一列占据了剩余的所有空间,而后两列刚刚好挤着,宽度各为100。
所以,应该是当auto和fr单位一同出现的时候,auto先尽可能大的占据空间,fr只能尽可能地占用小的空间
查看全部 -
如果grid-column-start为负值,表示的是“倒数第几条网格线”
比如,为-1的时候,表示这一列的开始网格线是倒数第一条线。
网格定义了5列,所以倒数第一条线,就是最后一条线,也就是第五列的右边的线。
现在要把第五列的右边这条线作为这个网格线的开始,那么就要多出一列,多出一列的宽度默认为auto,会尽可能大的占用空间,比如占据容器的剩余空间
查看全部 -
grid-template
属性值
轨道大小(track-size):px/em/%/fr(分数)/auto(剩余部分)
grid-template-columns列
grid-template-rows 行
查看全部 -
1.作用在网格内容中的容器属性
display grid-template gap items
content grid-auto grid
2.Display
display:grid| inline-grid| subgrid;
<div class="container"> <div class="item">one</div> <div class="item">two</div> <div class="item">three</div> <div class="item">four</div> <div class="item">five</div> </div> .container{ display:grid|inline-grid|subgrid }
grid 生成块级网格 inline-grid 生成行内网格
*当元素设置了网格布局,column、float、clear、vertical-align属性无效
查看全部 -
网格区域。
查看全部 -
Flexbox 是一维布局,只能在一条直线上放置内容区块;
Grid是一个二维布局,根据设计需求将内容区块放置到任何地方。
查看全部 -
template 的一种简洁的写法
查看全部
举报