CODEWITHSUNDEEP
csstwitter-bootstrap
Roderik
Roderik

Reputation: 45

Bootstrap 3 Grid: Overflowing columns behavior

I'm currently using this layout:

<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <!-- and on and on -->
</div>

The content in each column is variable in size, this causes a strange flow in the browser. Something like this.

As you can see, columns 4,5,6 are in a new "row". and columns 7 and 8 have skipped a whole column. These behaviors are not desireable, Instead I want the columns to flow like so.

In this situation every column hugs the column it's under. I haven't found a fix yet for this problem. I have looked into clearfix. and it does not seem to help the situation, as it just moves a column to a newline/row.

Upvotes: 2

Views: 1246

Answers (1)

Akif
Akif

Reputation: 474

What you are looking for is often reffered as a Pinterest style grid.

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS

* {
  box-sizing: border-box;
  font-size: 22px;
  font-family: "Helvetica", sans-serif;
  color: #333333;
}

.container {
  background-color: #f2f2f2;
  padding: 10px;
  border: 2px solid #CCCCCC;
  max-width: 900px;
  margin: 0 auto;
  height: 470px;
  display: flex;
  flex-flow: column wrap; /* Shorthand – you could use ‘flex-direction: column’ and ‘flex-wrap: wrap’ instead */
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  background-color: orange;
  height: 150px;
  width: 31%;
  margin: 1%;
  padding: 10px;
}

.item:nth-child(2) {
  background-color: pink;
  height: 250px;
}

.item:nth-child(3) {
  height: 190px;
}

.item:nth-child(4) {
  background-color: aqua;
  height: 220px;
}

Demo: https://codepen.io/michellebarker/pen/zvxpoG

Or this alternative: https://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid. Or search for more examples

Upvotes: 3

Related Questions