Can CSS Create a Masonry Layout Without JavaScript?

Can CSS Alone Create a Masonry-Style Layout?

The masonry layout exhibits the following characteristics:

• Boxes vary in height.
• Some boxes are noticeably wider.

Can this layout be achieved solely through CSS?

CSS Approach

Indeed, it is feasible with CSS3 support:

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

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

Non-CSS3 Approach

Unfortunately, this layout requires JavaScript in the absence of CSS3 support.

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