-
可能是兼容问题，我也设置了：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 的一种简洁的写法
查看全部 -
如图，简写实例
查看全部 -
属性值的定义
查看全部 -
实际进行编写的顺序
查看全部 -
grid可以进行下面所有属性的简写
查看全部 -
属性值的定义
查看全部 -
如图，控制自动布局算法的工作方式
查看全部 -
属性值的定义
查看全部 -
使用grid-auto来定义隐式网格轨道
查看全部 -
由于网格项过多从而自动增加的网格行，被称为隐式网格轨道，改变行高时，隐式网格轨道是不会发生改变的
查看全部 -
可以使用place-content进行简写。先定义列方向在定义行方向
查看全部
举报