How Can I Create a Masonry Layout Using Only CSS?

Creating a Masonry-Style Layout Using CSS

Achieving a masonry-style layout, where elements have varying heights and widths, solely through CSS has long been a challenge. With the advent of CSS3, this challenge has been overcome.

CSS3 Solution

CSS3 introduces the column-count property, which allows you to specify the number of columns in which content should be laid out. By combining this property with the column-gap property, which defines the spacing between columns, it is possible to create a masonry-style layout.

.container {
  column-count: 2;
  column-gap: 10px;
  width: 360px;
}

.container div {
  display: inline-block;
  width: 100%;
  background-color: red;
}

In this code, the .container element defines two columns with a gap of 10px between them. The .container div elements are laid out within these columns, with each element spanning the full width of the column.

Non-CSS3 Solution

Unfortunately, for browsers that do not support CSS3, a masonry-style layout cannot be achieved solely through CSS. In such cases, you may need to resort to JavaScript libraries for this purpose.

The above is the detailed content of How Can I Create a Masonry Layout Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!