-
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 的一种简洁的写法
查看全部
举报