css3中引入了一个新的单位fr(fraction),中文意思为“分数”,用于替代百分比,因为百分比(小数)存在除不尽的情况,用分数表示可以避免多位小数的写法。比如三列等宽的grid可以表示为: grid-template-columns: repeat(3, 1fr); 复制代码 (3) repeat 我们也可以用repeat方法来简...
// 等同与grid-template-rows: auto 1fr;grid-template-columns: auto 1fr auto; grid-template-areas: none; 是行与列的一种分配方式,犹如我们在使用HTML中table(表格)元素一般,行与列划分。 其中1fr,fr是fraction(读音:[ˈfrækʃn] n:小部分; 少量; 一点儿; 分数; 小数;)的缩写,提供的一个单...
grid-template-columns: repeat(3, 1fr); } 不确定容器尺寸下的自动填充 有的时候,父容器的尺寸是不确定的,我们需要把子元素往父容器中逐个填充,这个时候我们可以利用auto-fill。grid-template-columns: repeat(auto-fill, 50px);表示,每一列都是50px,但是具体有几列,需要根据子元素填充的情况来定。能放下8...
grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是,第三个列宽最少也是要 300px,但是最大不能大于第一第二列宽的两倍。代码以及效果如下: .wrapper-4 { display: grid; grid-template-columns: 1fr 1fr minmax(300px, 2fr); grid-gap: 5px; grid-auto-rows: 50px; } auto 关键字:由...
grid-template-columns:repeat(3, 1fr); 最后看到的效果如下: 总结 接下来回顾一下上面介绍的内容: 网格接受自适应和固定两种单位组合使用 不需要在grid-template中声明网格间距,可以直接使用grid-gap来直接声明网格之间间距 在网格布局中不显式声明grid-gap,可以使用自适应布局来自动计算他们之间间距 ...
grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素。 fr: 片段,为了方便表示比例关系。 grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px,后面剩余的宽度分为两部分,宽度分别...
1fr代表就一列,个数代表有几列 */ grid-template-columns: 1fr; /* 有两列 */ grid-template-columns: 1fr 1fr; /* 重复创建三个等1fr的列 */ grid-template-columns: repeat(3, 1fr); /* 重复创建三个等200px的列 */ grid-template-columns: repeat(3, 200px); /* 同上 */ grid-...
1.grid-template-columns(rows),他可以的定义网格列或者行的维度大小，在属性数值上，除了比较常用的属性，还支持fr，flex弹性系数，可以根据该数值比例来分配剩余空间。还有[xx]在属性数值里定义网格线的名称，方便以后再次引用他。还有repeat属性。如图所示的样式，是类似列表一样有很多重复的模块，就可以用到repeat...
grid-template-columns: minmax(150px, 25%) 1fr; } 1. 2. 3. 4. 上面代码中,grid-template-columns指定页面分成两列。第一列的宽度是minmax(150px, 25%),即最小宽度为150px,最大宽度为总宽度的25%;第二列为1fr,即所有剩余宽度。 3.垂直分布布局 ...