How to align div's with different heights?

Question

I'm trying to align div's like here: https://i.stack.imgur.com/FoBPg.png

But the result is wrong: https://codepen.io/online123/pen/VwvGoQP

HTML:

  <div class="under d-flex flex-wrap justify-content-center">
  <div class="box">Flex item 1</div>
  <div class="box">Flex item 2<br/><br/><br/>end</div>
  <div class="box">Flex item 3</div>
  <div class="box">Flex item 4</div>
  <div class="box">Flex item 5<br/><br/>end</div>
  <div class="box">Flex item 6</div>
  <div class="box">Flex item 7</div>
  <div class="box">Flex item 8</div>
  <div class="box">Flex item 9<br/><br/><br/><br/>end</div>
  <div class="box">Flex item 10</div>
  <div class="box">Flex item 11</div>
  <div class="box">Flex item 12</div>
  </div>

CSS:

.under {
    width:70%;
    margin:auto;
    padding-top:40px;
    padding-bottom:40px;
    text-align:center;
    border: 1px solid green;
    overflow:auto; 
  justify-content:center;
    position:relative;
}

.box {
    text-align:center;
    width:314px;
    padding:10px;
    margin:10px;
    display:inline-block;
    border: 1px solid black;
    align-self:flex-start;
}




body {
    height:100%;
    padding:0px;
    margin:0px;
    flex-direction:column;
    justify-content:center;
    background-color:#262626!important;
    color:#ddd!important;
    font-family: 'Jost', sans-serif;
}

How to do it? Can someone help me? Thanks

Note: the `
` tag does not use and does not need a closing slash and never has in HTML. — Rob, May 15 '20 at 17:32
Have tryied but it don't works. It stretch the **.box** width. Or stay with 3 columns when screen is small. — online123, May 16 '20 at 12:04

Ahsan Ullah · Answer 1 · 2020-05-16T19:45:23.303

0

If you want it in a static way not making any loop for map over them then you can acheive it in like this way.

.under {
 width:70%;
 margin:auto;
 padding-top:40px;
 padding-bottom:40px;
 text-align:center;
 border: 1px solid green;
 overflow:auto; 
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content: center;
 position:relative;
 column-count: 5;
}

.box {
 text-align:center;
 width:314px;
  min-width:314px;
 padding:10px;
 margin:10px;
 display:inline-block;
 box-shadow: 0px 4px #1c1c1c;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
 background-color: #363636;
 border: 1px solid red;
}

@media screen and (max-width: 2450px) {
  .under {
   column-count: 4;
  }
}

@media screen and (max-width: 1900px) {
  .under {
   column-count: 3;
  }
}

@media screen and (max-width: 1350px) {
  .under {
   column-count: 2;
      flex-direction:column;
      align-items:center;
  }
}

@media screen and (max-width: 900px) {
  .under {
   column-count: 1;
      flex-direction:column;
      align-items:center;
  }
}


asd{
  display:flex;
  flex-direction:column
}


body {
 height:100%;
 padding:0px;
 margin:0px;
 flex-direction:row;
 justify-content:center;
 background-color:#262626!important;
 color:#ddd!important;
 font-family: 'Jost', sans-serif;
}

<div class="under">
  <div class='asd'>
    <div class="box">Flex item 1</div>
    <div class="box">Flex item 4</div>
  </div>
  <div class="box">Flex item 2<br><br><br>end</div>
  <div class='asd'>
    <div class="box">Flex item 3</div>  
    <div class="box">Flex item 6</div>
  </div>
  <div class="box">Flex item 5<br><br/>end</div>
  <div class='asd'>
    <div class="box">Flex item 7</div>
    <div class="box">Flex item 8</div>
  </div>
  <div class="box">Flex item 9<br><br><br><br>end</div>
  <div class='asd'>
    <div class="box">Flex item 10</div>
    <div class="box">Flex item 11</div>
    <div class="box">Flex item 12</div>
  </div>
</div>

UPDATE THE ANSWER PLEASE HAVE LOOK AND RUN

edited May 16 '20 at 19:45

answered May 15 '20 at 17:34

Ahsan Ullah

158
4
15

@inside_tank yeah it will work but only you need to do is to add media query to adjust the width of **.box** to fit it to the mobile/smaller screen. – Ahsan Ullah May 15 '20 at 17:45
The width of .box should be allways 314px. By smaller screen it should be less columns. – online123 May 15 '20 at 17:49
then in media query change the **`flex-direction`** from **`column`** to **`row`** – Ahsan Ullah May 15 '20 at 18:01
It's don't works like I want. When you make your browser smaller and smaller the **.box'es** should change thier positions. The **.under** should be allways **70%**. – online123 May 15 '20 at 18:08
As i said in the answer if you want it in static other otherwise you can create another type of this design and hide that on desktop and show on mobile using media query. – Ahsan Ullah May 15 '20 at 18:28
I don't want it in static order. It should be dynamic (depends on the browser size). Is there any option to do it? – online123 May 15 '20 at 18:42
Here is an example how sould it work: https://leh.tv/ Try to make your browser smaller and smaller and see what happens with the boxes. – online123 May 15 '20 at 18:45
Do you have an another solution? – online123 May 16 '20 at 12:05
I don't think if you want the sequence like in image it is not possible but if you want it like in a sequence of 1,2,3,4,5..... then it is possible to make it – Ahsan Ullah May 16 '20 at 18:20
Sequence on image is only example. The sequence doesn't matter. – online123 May 16 '20 at 18:27
I make this: https://codepen.io/online123/pen/xxwyXXr But it makes the space between colums variable. How to make is static. Variable should be the left and right side (space). – online123 May 16 '20 at 18:29
how mean you want it in a sequence of **1,2,3,4,5** from left to right not like now how it is **1,6,11** ? waiting for your reply – Ahsan Ullah May 16 '20 at 18:48
Sequence doesn't matter. It could be other sequence like on image. Check here: https://codepen.io/online123/pen/xxwyXXr – online123 May 16 '20 at 18:53
@inside_tank please have look the answer above i have edited it please run the code. If it is what you want let me know. – Ahsan Ullah May 16 '20 at 19:07
@inside_tank open it in **full page** to see the effect. – Ahsan Ullah May 16 '20 at 19:09
This is not what I want. See screen: https://i.imgur.com/BIh6PEL.png – online123 May 16 '20 at 19:19
You can remove these space like i just update answer please see it is static. – Ahsan Ullah May 16 '20 at 19:46
Now there are 6 columns on start. And the @ media don't works. @ media works only <1350 -> 2 columns. – online123 May 16 '20 at 20:02
And "Flex item 1 and 2" are missing. – online123 May 16 '20 at 20:05

How to align div's with different heights?

1 Answers1