likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 48

原型与思考

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

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

几个注意要点

  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布局效果如下

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

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

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

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

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

grid-gap设置间隔

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

参考

转载自:https://juejin.cn/post/7083776069504860167
评论
请登录