CSS砌体布局，一行代码解决布局问题！

原创于 2025-04-03 11:48:44 发布 · 961 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端

前言

事情起因是这样的，大家在刷抖音，小红书等短视频平台、发现他们的布局是这样的瀑布流布局。
在这里插入图片描述

知道是瀑布流后，怎么做呢？我们第一反应是flex，grid？是的这是大部分人的固态思维

我认为这极为麻烦，因为你甚至还需要用到大量的@meida，javascript来解决细节问题，代码极其冗杂。

全文的大前提：不考虑图片顺序。

但是砌体布局使用columns后仅仅一行代码就能完成上述的功能！！🤩，这你还不学起来？

我查阅了许多博客，发现大多数对于使用column仅仅也就是介绍了多列布局，但是！！！！它的作用不仅仅如此，至少在这种不考虑顺序的瀑布流布局下，我认为它是最强的。

砌体布局原理就是使用column将元素分为不同的列，然后元素会自动填充空白的部分。但这还不是最特别的，列不是仅仅基于数量，而是可以根据每件物品的尺寸，自动进行响应式！！amazing！

Grid

这里代码我准备了很多图片，他们拥有不同的比例和尺寸

我们先来看grid布局怎么做的。

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

在这里插入图片描述
缺点很明显，这种方法会将图片强制分为三列，但是中间会出现许多剩余部分，这极为丑陋，你需要通过其他方法来解决这些，这里就不深入说了，毕竟这不是重点。

Flex

让我们来看看flex怎么做

img {
      width: 100%;
      margin-bottom: 1em;
    }

    .layout-container {
      display: flex;
      /* 允许换行，但是图像扭曲了 */
      flex-wrap: wrap;
    }

我们可以发现图片占满了整个屏幕
在这里插入图片描述
修复方法

img {
      width: 100%;
      margin-bottom: 1em;
      /* 只需要添加对象修复覆盖即可 */
      max-width: 300px;
      object-fit: cover;
    }

    .layout-container {
      display: flex;
      flex-wrap: wrap;
    }

在这里插入图片描述
修复后。间隔消失，并且整齐排列，但是发现很多图片缺了一块（比如第一行第三列），这不是我们要的效果，我们要的是保留图片的原比例

砌体布局：columns-visibility！

重头戏来了，砌体布局！

我们只需要要一行代码便能完美解决这个问题

column-count

    img {
      width: 100%;
      margin-bottom: 1em;
    }

    .layout-container {
      column-count: 3;
    }

在这里插入图片描述
是的你没看错，我们仅仅用了这一行代码，便解决了这个问题。 column-count: 3:把图片分为三列，在保持图片比例的情况下，又能填充空白部分。

但是细节的大佬就发现了，它不是响应式的，那不炸了吗。
在这里插入图片描述

我们用@media就能解决了，你以为我会用吗？😡那岂不是不又要写一堆@media来适配，这违背了我写这篇文章的目的，告诉你，不需要！！！😏一行代码搞定！

我们先看@media怎么实现🚀

    @media screen and (max-width: 600px) {
      .layout-container {
        column-count: 2;
      }
    }

在这里插入图片描述
可以发现的确解决了响应式的问题。

Now😍！睁开你们的眼睛👀，一行代码写完。

.layout-container {
      columns: 300px;
    }

columns: 300px 将列设置为300像素，系统按300像素划分列，自动进行响应式布局，如果下一张图片给它剩的位置不够，那么就会自动到下一行去，并且剩余的空间将会自动被填满。

Perfect！😄这种布局方式简直太爽了。🚀🚀

嗯哼😄，又有大佬发现了🚀，将浏览器最大化后，图片就会按照300像素划分列，从而一行铺满。
在这里插入图片描述
如果我们既想要响应式效果又想要指定行列呢？🤔（既要又要？哪有这么好的事情）

其实有的🔥，也是一行代码，诸君且看我如何操作。

.layout-container { 
      columns: 300px 3;
    }

columns: 300px 3是简写，表示在按照300像素的基础上，强行按照3列划分。

吼吼吼，发现变成三列了！我们也发现，它依然是响应式的！！amazing！！🤩
在这里插入图片描述

缺点

因为它是从上往下排序，如果我们需要一些动态加载图片的业务，那么新加入的图片将不会加入页面的最低端，不符合我们的业务需求。如果你的网站不需要考虑图片顺序，我个人认为这种方法是完美的。

注意，当你在包含太多元素的列表中使用 columns-visibility 时，它会导致布局和渲染计算不断进行，这会使网站卡顿，性能不佳。通常，对于大型列表，程序员不会使用 container-visibility，最流行的两个选项是分页或使用延迟加载。

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #242223;
    }

    
    img {
      width: 100%;
      margin-bottom: 1em;

      /* flex布局修复 */
      /* max-width: 300px;
      object-fit: cover; */
    }

    /* Grid布局 */
    /* .layout-container {
      display: grid;
      grid-template-columns: repeat(3,1fr);
    } */

    /* Flex布局 */
    /* 图片强行被拉伸 */
    /* .layout-container {
      display: flex;
      flex-wrap: wrap;
    } */

    /* 砌体布局 */
    .layout-container { 
      /* column-count: 3; */
      columns: 300px;
    } 

    /* grid */
    body {
      background-color: #242223;
    }


    /* 媒体查询修复响应式 */
    /* @media screen and (max-width: 600px) {
      .layout-container {
        column-count: 2;
      }
    } */
  </style>
</head>

<body>
  <div class="layout-container">
    <img src="../assets/1.jpg">
    <img src="../assets/2.jpg">
    <img src="../assets/3.jpg">
    <img src="../assets/4.jpg">
    <img src="../assets/5.jpg">
    <img src="../assets/6.jpg">
    <img src="../assets/7.jpg">
    <img src="../assets/8.jpg">
    <img src="../assets/9.jpg">
    <img src="../assets/10.jpg">
  </div>
</body>

</html>