How Can I Create a Seamless Multi-Row Layout of Variable-Height Divs with CSS?

Floating Divs with Variable Heights in CSS

Problem Statement

The goal is to display an infinite number of divs with varying heights within a parent container with a fixed width. The divs should flow seamlessly into rows, as illustrated in the provided image. However, using CSS floats or inline-block display results in height discrepancies that disrupt the desired layout.

Solution

Regrettably, achieving this layout using pure CSS alone is not feasible in all major browsers. Traditional solutions like floated divs or inline-block displays encounter challenges due to the unpredictable heights of the divs.

jQuery Masonry

To resolve this issue, it is recommended to leverage the capabilities of jQuery Masonry, a powerful JavaScript library that facilitates responsive layout management with customizable configurations. Masonry analyzes the heights of the divs dynamically, automatically arranging them into columns and rows while maintaining equal heights within each row, optimizing the space utilization within the container.

Example

Consider the provided CSS and HTML code, which initially attempts to solve the problem with flawed CSS approaches. By integrating jQuery Masonry as shown below, we can effectively address the height variability and achieve the desired layout:

<script src="masonry.pkgd.min.js"></script>
<script>
    $(function() {
        $('#holder').masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
</script>

By utilizing Masonry, the divs adjust their heights autonomously, resulting in a clean and aesthetically pleasing grid-like layout. This solution eliminates the manual pixel tuning and browser compatibility issues associated with pure CSS approaches.

The above is the detailed content of How Can I Create a Seamless Multi-Row Layout of Variable-Height Divs with CSS?. For more information, please follow other related articles on the PHP Chinese website!