如何使用CSS构建一个瀑布流布局

如何使用CSS构建一个瀑布流布局

瀑布流布局是一种常见的网页布局方式,其中元素以不同的大小排列,且行与列之间没有不均匀的间隙。在瀑布流布局中,即使某一行或列中的元素较短,下一个元素也会占据空间。

如何实现瀑布流布局

实现这一目标的方法有很多,但最好的方法就是使用grid-template-columnsrepeat()函数。

grid-template-columns 属性

除了明确的列大小之外,CSS Grid最有价值、最实用的功能之一就是重复列,直到列满为止,然后自动将项目放置其中。尤其是,我们可以在网格中指定所需的列数,然后让浏览器控制这些列的响应性,这样就能在视口尺寸较小的情况下显示较少的列,而在屏幕宽度增加时显示较多的列。

这可以通过使用 repeat() 函数和auto-placement属性来实现。简而言之,repeat()函数允许我们根据需要重复列。例如,如果我们要创建一个 12 列的网格,我们可以写如下代码:

css 复制代码
.grid {
  display: grid;
  /* 定义网格列数 */
  grid-template-columns: repeat(12, 1fr);
}

我们使用1fr告诉浏览器将可用空间平均分配给每一列,使每一列获得相等的份额。也就是说,无论网格有多大,本例中的网格总是有 12 列。然而,这还不够好,因为在较小的视口中,内容会被挤压得太厉害。

因此,我们需要指定列的最小宽度,确保它们不会太窄。为此,我们可以使用minmax()函数。

css 复制代码
grid-template-columns: repeat(12, minmax(300px, 1fr));

但由于CSS Grid的特性,该行会溢出。我们明确指示浏览器每行重复列 12 次,因此即使视口宽度太小,无法按照新的最小宽度要求全部容纳这些列,超出视窗范围的列也不会自动换行。

要实现换行,我们可以使用auto-fitauto-fill属性。

css 复制代码
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

通过使用这些关键字,我们可以指示浏览器为我们处理元素换行和列的大小,使原本会溢出的元素自动换行。

这就是Grid现在的样子:

但这不是砌体布局。那么如何实现呢?让我们来看看。

grid-columngrid-row属性

grid-columngrid-row属性指定了grid item在网格布局中的大小和位置。因此,我们可以指定网格中单个grid item的宽度或高度。为此,我们可以使用span特性。

要增加第一个grid item的宽度,我们可以这样写:

css 复制代码
.grid-item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
}

因此,第一个网格单元格将横跨两列,展示结果如下:

同理,如果要增加第二个grid item的高度,我们可以这样写:

css 复制代码
.grid-item:nth-child(2) {
    grid-column: span 1;
    grid-row: span 2;
}

因此,第二个grid item将横跨两行,展示效果如下:

同样,如果我们以所需的方式处理每个grid item,就会得到以下结果:

但是,如果grid item的数量过多,就无法为每个grid item指定精确的高度和宽度。因此,我们可以动态分配这些值:

css 复制代码
.grid-item: nth-child(7n+1) {
    grid-column: span 2;
    grid-row: span 1;
}

.grid-item: nth-child(7n+2) {
    grid-column: span 1;
    grid-row: span 2;
}

.grid-item: nth-child(7n+4) {
    grid-column: span 1;
    grid-row: span 2;
}

.grid-item: nth-child(7n+5) {
    grid-column: span 3;
    grid-row: span 1;
}

最终效果如下:

相关推荐
伍哥的传说25 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783827 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊38 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为