利用CSS columns 属性实现类似Google Keep的动态瀑布流布局

:root {
  --gap: .5rem; /* 定义一个CSS变量用于间距 */
}

.columnLayout {
  columns: 2; /* 将内容分成2列 */
  column-gap: var(--gap); /* 设置列间距 */
  padding: var(--gap) var(--gap) 0 var(--gap); /* 为容器添加内边距 */
  /* 其他基础样式，如背景色、字体等，可根据需求添加 */
  background-color: black;
  color: white;
  font: 16px sans-serif;
  margin: 0;
}

.columnLayout div {
  display: inline-block; /* 关键：使卡片元素能够跨列显示 */
  margin-bottom: var(--gap); /* 卡片之间的垂直间距 */
  /* 仅为美观的卡片样式 */
  border: 1px solid currentColor;
  border-radius: .5rem;
  padding: .5rem;
  width: 100%; /* 确保卡片占据其所在列的全部宽度 */
  box-sizing: border-box; /* 边框和内边距不增加元素总宽度 */
}

<div class="columnLayout">
  <div>1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, enim?</div>
  <div>2. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem animi similique placeat voluptatibus nihil cupiditate!</div>
  <div>3. Lorem ipsum dolor sit amet consectetur, adipisicing elit. At quis odit tenetur adipisci?</div>
  <div>4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ab.</div>
  <div>5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam distinctio dolores fuga sit culpa provident modi ex ipsa aspernatur maiores?</div>
  <div>6. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus doloribus exercitationem ex inventore vel, quo natus esse quos veritatis deserunt hic commodi architecto suscipit ad, ipsa, nulla sapiente totam dicta.</div>
  <div>7. Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolorum similique dolores, est sequi autem?</div>
</div>

// 引入 Masonry JS 库后
// 假设你的容器元素ID为 'masonry-container'
var elem = document.querySelector('.grid'); // 获取容器元素
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item', // 指定每个瀑布流项的选择器
  columnWidth: 200, // 指定列宽或选择器
  gutter: 10 // 指定间距
});