30秒学会 CSS 片段 – Masonry Layout

Creates a vertical masonry layout using HTML and CSS.

• Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed width (vertical layout) or a fixed height (horizontal layout), forming a perfect fit. Especially useful when working with images.
• .masonry-container is the container for the masonry layout. Within that container, there’s a div.masonry-columns, which will automatically put each child element, .masonry-brick, into the layout.
• .masonry-brick must be have display: block to allow the layout to flow properly, while the :first-child of this class should have a different margin to account for its positioning.
• CSS variables are used to allow for greater flexibility for the layout, while media queries ensure that the layout flows responsively in different viewport sizes.

预览

在 CodePen 中编辑

HTML

<div class="masonry-container">
  <div class="masonry-columns">
    <img class="masonry-brick" src="https://picsum.photos/id/1016/384/256" alt="An image">
    <img class="masonry-brick" src="https://picsum.photos/id/1025/495/330" alt="Another image">
    <img class="masonry-brick" src="https://picsum.photos/id/1024/192/128" alt="Another image">
    <img class="masonry-brick" src="https://picsum.photos/id/1028/518/345" alt="One more image">
    <img class="masonry-brick" src="https://picsum.photos/id/1035/585/390" alt="And another one">
    <img class="masonry-brick" src="https://picsum.photos/id/1074/384/216" alt="Last one">
  </div>
</div>

CSS

/* Container */
.masonry-container {
  --column-count-small: 1;
  --column-count-medium: 2;
  --column-count-large: 3;
  --column-gap: 0.125rem;
  padding: var(--column-gap);
}

/* Columns */
.masonry-columns {
  column-gap: var(--column-gap);
  column-count: var(--column-count-small);
  column-width: calc(1 / var(--column-count-small) * 100%);
}

@media only screen and (min-width: 640px) {
  .masonry-columns {
    column-count: var(--column-count-medium);
    column-width: calc(1 / var(--column-count-medium) * 100%);
  }
}

@media only screen and (min-width: 800px) {
  .masonry-columns {
    column-count: var(--column-count-large);
    column-width: calc(1 / var(--column-count-large) * 100%);
  }
}

/* Bricks */
.masonry-brick {
  width: 100%;
  height: auto;
  margin: var(--column-gap) 0;
  display: block;
}

.masonry-brick:first-child {
  margin: 0 0 var(--column-gap);
}

翻译自：https://www.30secondsofcode.org/css/s/masonry-layout