CODEWITHSUNDEEP
htmlcss
JJCarlk3
JJCarlk3

Reputation: 69

How to align my div columns

My div columns look like the screenshot below. How can I align the columns so that they are the same height no matter the difference in content? With plain html/css alone or with the help of javascript/jquery/angularjs, but without bootstrap since I'm not allowed to use that framework.

Upvotes: 1

Views: 64

Answers (2)

Markie
Markie

Reputation: 131

By adding display:flex to the container, all the children items will be the same height.

But they will also all be in the same row. To limit only 3 per row, like your mock above - add flex-wrap: wrap; to the container. And make sure your items have a width.

.galeria_packs {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

See the jsfiddle with your provided code: http://jsfiddle.net/yv363pcy/

Upvotes: 2

razemauze
razemauze

Reputation: 2676

Have you looked at display:flex;? I believe it does what you want:

.galeria_packs {
    display: flex;
    flex-wrap: wrap;
}

This should make each row the same height, even if there's more content in one of the boxes than the others.

Heres a (quick) working Fiddle, showing the result.

Upvotes: 2

Related Questions