How Can I Create a Masonry Column Layout with Bootstrap 4's Flexbox Grid?

Masonry Column Layout with Flexbox Grid in Bootstrap 4

While the flexbox grid system in Bootstrap 4 provides versatility in creating responsive layouts, it's true that columns initially display with equal height. However, it's possible to achieve a masonry column layout using the "Card columns" feature.

Card Columns

As explained in the Bootstrap 4 documentation, "Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns." This feature utilizes CSS column properties, ensuring easier alignment compared to flexbox.

To create a masonry column layout, simply wrap your .card elements within a .card-columns container. The cards will then arrange themselves dynamically, with their height determined by their content.

This approach maintains the simplicity and responsiveness of Bootstrap's flexbox grid, while still providing the desired masonry effect.

Example

Below is a code example demonstrating the usage of card columns to create a masonry layout:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 id="Card-title">Card title</h5>
        <p class="card-text">Card content</p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top lazy" src="/static/imghwm/default1.png" data-src="path-to-image" alt="Card image cap">
      <div class="card-body">
        <h5 id="Another-card-title">Another card title</h5>
        <p class="card-text">More card content</p>
      </div>
    </div>
    <!-- Additional cards can be added as needed -->
  </div>
</div>

By using card columns, you can easily achieve the desired masonry column layout utilizing Bootstrap 4's flexbox grid system.

The above is the detailed content of How Can I Create a Masonry Column Layout with Bootstrap 4's Flexbox Grid?. For more information, please follow other related articles on the PHP Chinese website!