CSS瀑布流简易设置

53

CSS 相关

.masonry-grid {
   /* It is split into 3 columns */
   column-count: 3;
  
  /* The space between columns */
   column-gap: 1rem;
  
  /* Misc */
  width: 100%;
  }
  
  .masonry-grid__item {
  /* Prevent a column from breaking into multiple columns */
  break-inside: avoid;
  
   /* Misc */
   margin-bottom: 1rem;
}

HTML

<div class="masonry-grid">
    <!--Item -->
    <div class="masonry-grid__item">...</div>

    <!-- Repeat other items -->
</div>