How to Achieve a Masonry Layout Using Bootstrap 4's Flexbox Grid?

How to Create a Masonry Layout in Bootstrap 4 with Flexbox Grid

In Bootstrap 4, you can achieve a masonry column layout utilizing the flexbox grid by leveraging the Card columns feature.

Solution:

Wrap your card elements in a .card-columns container, as seen below:

<div class="container">
  <div class="card-columns">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</div>

Explanation:

• The .card-columns class uses CSS columns to arrange your cards from top to bottom and left to right.
• The cards are displayed inline-block to prevent them from breaking across columns.
• Because column-break-inside: avoid is not yet a bulletproof solution, you may still experience inconsistent column heights.

Example:

Consider the following HTML:

<div class="container">
  <div class="card-columns">
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-1.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-title">Card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-2.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-title">Another card title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-3.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Card-with-long-title">Card with long title</h5>
        <p class="card-text">...</p>
      </div>
    </div>
    <div class="card">
      <img src="/static/imghwm/default1.png" data-src="card-image-4.jpg" class="lazy" alt="Card image">
      <div class="card-body">
        <h5 id="Another-card-with-even-more-text">Another card with even more text</h5>
        <p class="card-text">...</p>
      </div>
    </div>
  </div>
</div>

This will result in a masonry layout, with the cards arranging themselves based on their content height, creating a visually appealing and dynamic grid.

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