CSS 벽돌 레이아웃 예제

可以使用CSS Grid或CSS多列布局实现类瀑布流效果，但原生display: masonry尚未被广泛支持。1. 使用CSS Grid：通过设置display: grid、grid-template-columns定义列数、grid-auto-rows定义行高并结合gap间距，使不同高度的项目自动排列成近似瀑布流的布局，配合break-inside: avoid防止内容断行，适用于现代浏览器且支持响应式调整列数。2. 使用CSS多列布局（column-count）：适用于文本或简单元素，通过column-count划分列数，item设为inline-block并避免分页断开，优点是天然支持垂直堆叠，缺点是控制性弱、仅适合顺序排列。3. 注意事项：当前（2025年初）原生display: masonry仍处于提案阶段，主流浏览器不支持，如需精准填空排列（如Pinterest风格），应使用JavaScript库如Masonry.js或Isotope。综上，对一般项目推荐使用CSS Grid模拟瀑布流，兼顾兼容性与维护性；复杂场景建议采用JS方案以获得更优布局效果。

CSS Masonry Layout（瀑布流布局）是一种常见的网页布局方式，特别适合展示图片、卡片等内容不等高的场景。虽然传统的“masonry”效果多用 JavaScript 实现（如 Masonry.js），但现在可以通过 CSS 的 column-count + inline-block 或 display: grid 来实现简易的纯 CSS 瀑布流效果。

下面是一个使用 纯 CSS Grid 模拟 Masonry 布局 的实用示例（目前原生 display: masonry 尚未广泛支持，但可以用 Grid 折中实现）：

✅ 使用 CSS Grid 实现类 Masonry 布局

HTML 结构

<div class="masonry-grid">
  <div class="item">Item 1<br>Some content here.</div>
  <div class="item">Item 2<br>Short</div>
  <div class="item">Item 3<br>A longer item with more text.</div>
  <div class="item">Item 4<br>Image or card</div>
  <div class="item">Item 5<br>Another one</div>
  <div class="item">Item 6<br>Very tall content<br>Line<br>Line<br>Line</div>
</div>

CSS 样式

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  grid-auto-rows: minmax(100px, auto);  /* 最小高度，避免太扁 */
  gap: 12px;                            /* 间距 */
  padding: 16px;
}

.item {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  /* 关键：让项目自动“堆叠”而不强制对齐行 */
  break-inside: avoid; /* 避免在打印或分页时断开 */
  word-wrap: break-word;
}

/* 响应式：在小屏幕上变为2列或1列 */
@media (max-width: 768px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .masonry-grid {
    grid-template-columns: 1fr;
  }
}

? 效果说明

• 这种方法利用了 CSS Grid 自动行生成（grid-auto-rows） 和 内容高度自适应 的特性。
• 每个 .item 高度不同，Grid 会自动排列成类似“瀑布流”的视觉效果。
• 虽然不是严格意义上的 Masonry（比如无法像 JS 那样精确填空），但在大多数现代浏览器中表现良好。

⚠️ 注意事项

• 原生 display: masonry 还未支持：目前（截至 2025 年初）主流浏览器尚未支持 display: masonry（属于 CSSWG 提案阶段），所以不能直接使用。
• 更真实的 Masonry？用 JS：如果需要更精确的布局（如 Pinterest 风格），推荐使用 JavaScript 库：
  • Masonry by Metafizzy
  • Isotope（功能更强）
  • 或使用 React/Vue 的第三方组件封装。

✅ 替代方案：使用 CSS 多列（column-count）

适合文本类或简单元素的瀑布流：

.masonry-columns {
  column-count: 3;
  column-gap: 16px;
}

.item {
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
  break-inside: avoid; /* 防止元素被切断 */
}

优点：天然支持瀑布流排列；缺点：只适合从上到下顺序流式布局，控制性差。

基本上就这些。对于大多数现代项目，用 Grid 模拟 + 响应式处理 是最简单、兼容性好的方案。真正复杂的 Masonry 排列还是交给 JS 更稳妥。

위 내용은 CSS 벽돌 레이아웃 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!