0

I am trying to create text boxes to display reviews on a website. Each review is in a box, these boxes will be different heights depending in the amount of text per box. The image below is how I want it to be displayed on the website, the black boxes represents a review box.

enter image description here

However, I can't seem to find a way to display the text boxes like this without them all being stretched to the same size by using the flex attribute, or starting a new row based off the largest text box in the column.

The example code i have currently is:

.container-reviews {
  width: 100%; 
  justify-content: space-between;
}

.box {
  width: 24%;
  background-color: black;
  color: white;
  float: left;
}

<div class="container">

  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div class="box">Lorem ipsum dolor sit amet</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
  <div class="box">Lorem ipsum dolor sit amet</div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>

</div>

Does anyone know how i can change my code to make the box div align like the image above?

Alfie
  • 89
  • 9

1 Answers1

-2

Use column flex with box wrapping, then use flex-start to align the boxes to the top.

.container {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-content: flex-start;
    max-width: 300px;
    max-height: 300px;
}
.box {
    width: 70px;
    margin: 0 5px 15px 5px;
    background: yellow;
    text-align: center;
}
<div class="container">
    <div class="box" style="height:50px">Box 1</div>
    <div class="box" style="height:100px">Box 2</div>
    <div class="box" style="height:90px">Box 3</div>
    <div class="box" style="height:30px">Box 4</div>
    <div class="box" style="height:60px">Box 5</div>
    <div class="box" style="height:70px">Box 6</div>
    <div class="box" style="height:40px">Box 7</div>
    <div class="box" style="height:80px">Box 8</div>
    <div class="box" style="height:90px">Box 9</div>
    <div class="box" style="height:100px">Box 10</div>
    <div class="box" style="height:120px">Box 11</div>
</div>
bron
  • 1,457
  • 1
  • 9
  • 18