如何使用CSS columns 实现类似Google Keep的卡片布局

在现代网页设计中，创建内容动态、高度不一的卡片式布局是一个常见需求，尤其是在展示笔记、文章摘要或图片流时，类似google keep的瀑布流（masonry）布局因其高效利用空间和良好的视觉体验而广受欢迎。虽然传统的flexbox或grid布局在处理等高或固定高度的网格时表现出色，但对于高度不一的卡片，它们往往难以实现紧凑的瀑布流效果。幸运的是，css提供了一个专门用于多列布局的columns属性，可以非常简洁地实现这一效果。

使用 CSS columns 属性实现卡片布局

CSS columns 属性的设计初衷是为了将内容分成报纸式的多列。当应用于一个容器时，其子元素会从上到下填充第一列，然后溢出到第二列，依此类推。这正是实现类似Google Keep布局的关键。

核心 CSS 代码

:root { 
  --gap: .5rem; /* 定义一个间距变量，方便管理 */
}

.columnLayout {
  columns: 2; /* 将容器内容分成2列 */
  column-gap: var(--gap); /* 定义列之间的间距 */
  padding: var(--gap) var(--gap) 0 var(--gap); /* 为容器添加内边距 */
}

.columnLayout div {
  display: inline-block; /* 关键：使每个卡片独立显示并参与多列布局 */
  margin-bottom: var(--gap); /* 定义卡片之间的垂直间距 */
  width: 100%; /* 确保卡片占据其所在列的全部宽度 */
}

/* 以下样式仅用于美化，与布局核心逻辑无关 */
* { box-sizing: border-box } 
body{ background-color: black; color: white; font: 16px sans-serif; margin: 0 } 
.columnLayout div { border: 1px solid currentColor; border-radius: .5rem; padding: .5rem }

HTML 结构

<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>

实现原理与注意事项

1. columns 属性:
   • columns: 2; 表示将容器内容分成两列。你也可以使用 columns: 200px; 来指定列的最小宽度，浏览器会根据可用空间自动计算列的数量。
   • column-gap: var(--gap); 设置列与列之间的水平间距。
2. 卡片样式 (.columnLayout div):
   • display: inline-block; 是实现此布局的关键。它使每个卡片成为一个独立的块级元素，但又能够像行内元素一样在多列中流动。如果使用 display: block;，则每个卡片会独占一行，无法形成多列布局。
   • margin-bottom: var(--gap); 为卡片之间提供垂直间距，避免它们紧密贴合。
   • width: 100%; 确保每个卡片在其所在的列中占据全部可用宽度。
3. 浏览器兼容性: columns 属性具有良好的浏览器兼容性，甚至包括Internet Explorer的部分版本。你可以查阅MDN Web Docs获取详细兼容性信息。
4. 内容流向: 使用 columns 属性时，内容是先垂直填充一列，再填充下一列。这意味着，如果你有1、2、3、4、5、6六个卡片，它们可能会按1-3-5（第一列）、2-4-6（第二列）的顺序排列。这与某些严格的“从左到右，然后换行”的瀑布流布局有所不同，但与Google Keep的视觉效果非常接近。

替代方案：JavaScript 瀑布流库

如果你的需求是严格按照“从左到右，然后向下换行，并且下一行从最矮的列开始填充”这种传统的瀑布流布局，那么仅凭CSS columns 可能无法完全满足。在这种情况下，你需要借助JavaScript来实现。

Masonry JS 是一个非常流行且功能强大的JavaScript库，专门用于创建这种动态的、响应式的瀑布流布局。它会根据卡片的高度和可用空间，自动计算并调整卡片的位置，以实现最佳的排列效果。

Masonry JS 的特点

• 动态定位: Masonry JS会计算每个卡片的高度，并将其放置在当前最短的列中，从而最大限度地减少垂直空白。
• 响应式: 可以根据屏幕尺寸变化自动调整列数和布局。
• 易于集成: 提供简单的API，方便开发者在项目中集成。

如果你不希望自己编写复杂的JavaScript代码来处理卡片定位，Masonry JS或类似的库（如Isotope）将是理想的选择。它们提供了高度优化的解决方案，能够处理各种复杂的布局场景。

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

41

查看详情

立即学习“前端免费学习笔记（深入）”；

总结

实现类似Google Keep的卡片布局，主要有两种方法：

1. CSS columns 属性: 适用于需要简单、纯CSS实现，且内容流向（先垂直填充列，再水平移动到下一列）符合需求的场景。它简单、高效且兼容性良好。
2. JavaScript 瀑布流库（如Masonry JS）: 适用于需要严格的从左到右、然后向下换行的瀑布流布局，或者需要更高级的动态布局控制（如过滤、排序）的场景。虽然引入了JavaScript依赖，但能提供更精细的布局控制和用户体验。

根据你的具体项目需求和对布局精确度的要求，选择最适合你的方法即可。对于大多数类似Google Keep的视觉效果，CSS columns 属性往往是更简洁高效的选择。

以上就是如何使用CSS columns 实现类似Google Keep的卡片布局的详细内容，更多请关注php中文网其它相关文章！