CSS Grid实现排行榜,控制网格的流动方向

1,732

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情

原型与思考

如图所示,就是实现一个简单的城市排行榜

几个注意要点

  1. 固定两列,两列之间有固定的空隙。但不固定有多少行,根据容器的高度自动填充多少行;
  2. 数据项先摆满第一列,再摆第二列;
  3. 布局要求有一定的适配性,数据项可以固定高度,但不能固定宽度(因为整个容器的宽就是通过vw单位自适应的);
  4. 数据项要垂直居中;

Flex还是Grid

其实文章标题就暴露了最终会用Grid布局来实现,但还是有小伙伴可能会质疑:“诶?你Grid能做的,我Flex布局一样能实现啊!实在不行,远古的table表格也可以一个个单元格,隔出来最终的效果啊?”

但平心而论,没有什么技术是银弹,jQuery一把梭也不是无敌,不过是适用什么场景而已。

我个人觉得,单行的线性布局适合用Flex布局,比如文本的排列;但平面的区域性布局,则用Grid更适合,比如九宫格啊之类的。 我们试着实现看看。

最终案例

jsrun.net/CE9Kp/edit

Grid属性解读

grid-template-columns设置网格的列宽

取值方式有五种

  1. 固定列宽,固定列数量
/* 设置两列,每一列宽20像素 */
grid-template-columns: 20px 20px; 
/* 通过repeat()函数,重复2列,列宽都是20像素 */
grid-template-columns: repeat(2, 20px);
/* 也可以设置百分比作为列宽 */
grid-template-columns: 33% 33% 33%;
  1. 固定列宽,不固定列数量
/* 列宽20像素,但不确定有多少列,按照容器自动铺满 */
grid-template-columns: repeat(auto-fill, 20px);
  1. 不固定列宽,固定列数量
/* 设置两列,每一列占一份(相当于设置为50% 50%) */
grid-template-columns: 1fr 1fr
/* 通用可以使用repeat()函数 */
grid-template-columns: repeat(2, 1fr)
  1. 不固定列宽,也不固定列数量
/* minmax函数:设置该列最小最大多宽 */
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
/* auto关键字:该列的宽度自适应,减去其他列的宽度后,所剩的宽度就是该列的宽度 */
grid-template-columns: 20px auto 20px;
  1. [columnName]指定列名称
/* 设置了两列,第一列名称为c1,第二列名称为c2 */
grid-template-columns: [c1] 20px [c2] 20px;

同理,设置行高的grid-template-rows属性,取值范围也是一样的

grid-auto-column设置隐式网格

隐式网格与显式网格:摆放在Grid容器内的就是显式网格,摆放在容器外的就是隐式网格,也就是多出来的网格。 赋值规则和grid-template-columns是完全一样。

grid-auto-flow控制布局算法

Grid布局中网格元素默认是以grid-auto-flwo: row “先行后列”的顺序进行摆放的,也就是“先摆满行,再摆列”

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

上述的CSS布局效果如下

这里注意一下,Five之后空了一格,Six换行来摆放了。这也很容易理解,因为Six太胖了,摆不下了,而Seven认为自己是和Six是同一行的,所以就空了一格。那能不能让它自己怼上去呢?可以的,设置grid-auto-flwo: row dense成为紧凑布局就可以了,效果如下:

回到我们的案例,如果想反过来,先摆满每一列再摆满行,则可以改成grid-auto-flwo: column,看看One、Two的走向是不是先列后行

grid-gap设置间隔

grid-gapgrid-column-gapgrid-row-gap的简写属性,顾名思义,是设置列与列之间,行与行之间的空隙。 这个比较简单,就不多说了,但是Flex布局是没有gap属性,不能设置元素之间的空隙的,因为Flex布局的本质是线性布局。 通过这几个属性,以及Grid布局的特性,再对比一下Flex,哪个更灵活,我想你应该有答案了。 当然,Grid布局的兼容性也一直饱受争议,但不妨碍我们去学习它。

参考