Loading

grid 布局

1fr 表示剩余的100% 空间

  • 1fr 的意思是“100%的剩余空间”, .25fr 意味着“25%的剩余空间”。当时当 fr 大于 1 的时候,则会重新计算比例来分配。
    repeat 重复的变量
  • grid-template-columns:repeat(2,1fr)=grid-template-columns:1fr 1fr;

Grid布局解决列等分问题

blog.csdn.net成就一亿技术人!

Grid布局解决列等分问题

实际需求:

在这里插入图片描述

通常我们一般会选择用flex布局来实现:

{
	display: flex;
	flex-direction: row;
	justify-content : space-between;
}

但是这样的方式会导致最后一行不沾满的情况下排列出现问题,像这样:-
在这里插入图片描述

其实我们是希望其他行等分,最后一行左对齐的效果的,如果一定要用flex来做,就必须写占位的div,让最后一行沾满,让每一行的个数相等,达到等分效果。但是在屏幕自适应,内容大小不确定且不固定一行显示多少个的情况下,这个逻辑就显得相对复杂,所以最后考虑用grid布局来实现。

之前有分享过grid的一些基础用法,这次的重点也不在基础上,所以直接跳过,直接上进入主题-
grid布局基础链接

首先要普及一下demo用到的一些概念

1、等分(fr)单位

Grid 带来了一个全新的值,称为等分单位,即 fr 。它允许你将容器可用空间分成你想要的多个等分空间。

{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

结果:-
在这里插入图片描述

2、repeat()-
可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数:第一个参数定义网格轨道应该重复的次数,第二个参数定义每个轨道的尺寸-
所以下面两个写法结果相等

{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

效果和上个例子一样

3、auto-fit (自适应)-
但是我们不希望固定行的次数,希望自动填充次数,充满外面的容器,可以用auto-fill或者auto-fit

{
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
}

结果:-
在这里插入图片描述

现在这个网格已经可以通过容器的宽度来改变列的数量。但是貌似还不能完全满足需求-
它只是尽可能的把100px宽的盒子往一列里面塞,我们永远得不到我们想要的灵活性,因为它们很少会加起来正好等于容器的宽度,所以右边经常会留白。

4、minmax()-
可以通过minmax()函数来创建网格轨道的最小或最大尺寸。-
minmax()函数接受两个参数:第一个参数定义网格轨道的最小值,第二个参数定义网格轨道的最大值。可以接受任何长度值,也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压-
所以在代码上改成:

 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

在这里插入图片描述

所以现在列的宽度至少 200px 。但是,如果有更多的可用空间,网格将分配给每个列,因为列的值变成了一个等分单位 1fr ,而不是 200px

项目实际效果:

在这里插入图片描述

虽然css网格布局能轻松做到平均分配内容,但是实际实用上还是会有部分问题,比如要考虑浏览器的兼容,还有当只有一行数据没有参考行的时候,需要另外写兼容

用户和浏览器支持-
全球占85%网站流量的浏览器支持-
!(https://img-blog.csdnimg.cn/20181115224240488.png在这里插入图片描述-
在这里插入图片描述

跳转到 Cubox 查看

posted @ 2023-11-12 15:22  小小的编程员  阅读(59)  评论(0编辑  收藏  举报