1

I'm trying to combine a Masonry Layout whilst using the grid-system in Bootstrap 4. I want to achieve the following:

  • Two column Masonry layout when in XS devices
  • Three column Masonry layout when in SM devices
  • Four column Masonry layout when in MD devices
  • Six column Masonry layout when in XL devices

I'm trying this code and combinations thereof:

<div class="container">

    <div class="row card-columns">

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card">                    
                <div class="card-body">Top<br><br><br>Bottom</div>
            </div>

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card">
                <div class="card-body">Top<br>Bottom</div>
            </div>

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card ">
                <div class="card-body">Top<br><br>Bottom</div>
            </div>

            <div class="col-6 col-sm-4 col-md-3 col-xl-2 card">
                <div class="card-body">Top & Bottom</div>                   
            </div>                    

    </div>            

</div>

I assume it fails because class row and card-columns can't probably be used together. Bootstrap documentation reads:

Cards are built with CSS column properties instead of flexbox for easier alignment.

Nesting the card divs in a card-columns div inside the row div doesn't work either. Any ideas are appreciated.

Pisuke Soramame
  • 89
  • 1
  • 8

2 Answers2

1

I found this solution (Interestingly in my ubuntu box works well in firefox but not in chrome...)

HTML:

<div class="card-columns">

    <div class="card">                    
        <div class="card-body">Top<br><br><br>Bottom</div>
    </div>

    <div class="card">
        <div class="card-body">Top<br>Bottom</div>
    </div>

    <div class="card ">
        <div class="card-body">Top<br><br>Bottom</div>
    </div>

    <div class="card">
        <div class="card-body">Top & Bottom</div>                   
    </div> 

    <div class="card">                    
        <div class="card-body">Top<br><br><br>Bottom</div>
    </div>

    <div class="card">
        <div class="card-body">Top & Bottom</div>                   
    </div> 

</div>

Custom CSS:

.card-columns {
    column-count: 2;
}

@media (min-width: 576px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}

@media (min-width: 1200px) {
    .card-columns {
        column-count: 6;
    }
}
Pisuke Soramame
  • 89
  • 1
  • 8
0

Per the Bootstrap 4 documentation, the breakpoints for each screen size are as follows:

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

To change the column count of the masonry-like card columns, we need to access the column-count property of the .card-columns class

.card-columns {
    column-count: 4;
  }

To achieve a specific column-count at each break point, we can declare the CSS rule above within a media query. You're trying to achieve the following:

  • Two column Masonry layout when in XS devices
  • Three column Masonry layout when in SM devices
  • Four column Masonry layout when in MD devices
  • (Five column Masonry layout when in LG devices) ?
  • Six column Masonry layout when in XL devices

This is achieved with the following CSS rules:

.card-columns {
    column-count: 2;
}

@media (min-width: 576px) { 
    .card-columns {
        column-count: 3;
   }
}

@media (min-width: 768px) { 
    .card-columns {
        column-count: 4;
   }
}

@media (min-width: 992px) { 
    .card-columns {
        column-count: 5;
   }
}

@media (min-width: 1200px) { 
    .card-columns {
        column-count: 6;
   }
}
josephemswiler
  • 401
  • 4
  • 5