columns 属性

• columns 用来设置元素的列宽和列数

INFO

这种方式可以实现简易瀑布流，但是最后一项怎么靠右的？浏览器计算高度时的问题吧

查看代码

<template>
  <div class="container">
    <img src="https://s21.ax1x.com/2024/10/21/pAa7uVA.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAaoXmd.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAa7KUI.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAaoblD.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAa7eDH.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAaoLOH.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAa7M5t.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAa7mbd.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAaoq6e.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAa718f.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAaoblD.jpg" />
    <img src="https://s21.ax1x.com/2024/10/21/pAa7lPP.jpg" />
    <!-- <img src=""> -->
  </div>
</template>

<style lang="less" scoped>
.container {
  columns: 3 100px;
  column-gap: 16px;
  img {
    display: block;
    margin-bottom: 16px;
  }
}
</style>