CSS: masonry layout

Barbara Streisand
Release: 2024-11-07 16:06:03
Original
643 people have browsed it

What is masonry layout?

from MDN:

Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.

pinterest.com's layout is one classic example of it:

CSS: masonry layout

What can we use from our CSS toolbox?

grid

We use a simple HTML markup:

<div>



<p>My first shot was grid & grid-template-column<br>
</p>

<pre class="brush:php;toolbar:false">.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}
Copy after login

CSS: masonry layout

The responsiveness is great, but we have gaps below each image.

column-count

next, use the column-count CSS container property.

The column-count CSS property breaks an element's content into the specified number of columns.

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}
Copy after login

CSS: masonry layout

Not good.
The current layout looks as desired, but the images are scaled and not responsive. While we could use media queries to control responsiveness, we’re aiming for a more robust solution.

Using columns

The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}
Copy after login

CSS: masonry layout

A single line of code. Amazing!

How does this work?

Each column is given a minimum width of 250px. If there is extra space beyond 250px, the columns will expand to fill the space. If the space is reduced, the number of columns will decrease accordingly.

Extras

We can limit the number of columns by setting the layout to a maximum of X columns:

.photos {
  columns: 250px 2;
  ...
  ...
}
Copy after login

CSS: masonry layout

Using

columns
is not limited to masonry image layouts alone. We can also use it to style text columns: same CSS, different content.

CSS: masonry layout

Final thoughts

Was this helpful?
What was your use case?

The above is the detailed content of CSS: masonry layout. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template