CSS Brick Layout

Question

I have been trying to create a brick layout, as in an attached image in CSS, for two days without any success. See Attached Image.

To achieve this layout, I wrote code. I tried to replicate the first line (a line with the word "Let's") using the following HTML

<div class="photo-row first">
    <div class="first-item-1"></div>
    <div class="first-item-2"></div>
    <div class="first-item-3"></div>
    <div class="first-item-4"></div>
    <div class="first-item-5"></div>
</div>

and CSS

.photo-row {
    width: 100%;
    height: 200px;
}
.photo-row.first div {
    display: inline-block;
    height: 100%;
}
.first-item-1 {
    width: 13.57%;
    background: red;
}
.first-item-2 {
    width: 19.21%;
    background: green;
}
.first-item-3 {
    width: 31.21%;
    background: orange;
}
.first-item-4 {
    width: 15.14%;
    background: blue;
}
.first-item-5 {
    width: 19.78%;
    background: yellow;
}

the idea was to give each div a fixed percentage width of the parent div so that they align in the brick format and are responsive. Then I was going to give each of the children a div background image. My layout works, but in some viewport ports it breaks and the last child div is shifted to the second line.

I also did a demo of codepen to demonstrate this: https://codepen.io/Ali_Farooq_/pen/oobBYj

.photo-row {
  width: 100%;
  height: 200px;
}

.photo-row.first div {
  display: inline-block;
  height: 100%;
}

.first-item-1 {
  width: 13.57%;
  background: red;
}

.first-item-2 {
  width: 19.21%;
  background: green;
}

.first-item-3 {
  width: 31.21%;
  background: orange;
}

.first-item-4 {
  width: 15.14%;
  background: blue;
}

.first-item-5 {
  width: 19.78%;
  background: yellow;
}

<div class="photo-row first">
  <div class="first-item-1"></div>
  <div class="first-item-2"></div>
  <div class="first-item-3"></div>
  <div class="first-item-4"></div>
  <div class="first-item-5"></div>
</div>

Run codeHide result

, , divs 100% , . ... , , div. - JavaScript/jQuery, .

!

Answer 1

display:flex, "" , flex-grow , .

, , . flex-grow nth , . .

Flex, , align-items justify-content "".

flex-grow: 2. , , . , , flex-grow:1 ( ), .

.wall {
  height: auto;
  }
.row {
  display: flex;
  border-top: 2px solid white;
}

.row .brick {
  flex-grow: 2;
}

.row .brick:not(:last-child) {
  border-right: 2px solid white;
}

.row:nth-child(even) > .brick:first-child,
.row:nth-child(even) > .brick:last-child {
  flex-grow: 1;
}

.brick {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  height: 50px;
  color: #fff;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
}

<div class="wall">
  <div class="row">
    <div class="brick"></div>
    <div class="brick">Lets</div>
    <div class="brick"></div>
    <div class="brick">Make</div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick">The</div>
    <div class="brick"></div>
    <div class="brick">World</div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>   
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick">Suck</div>
    <div class="brick">Less</div>
    <div class="brick"></div>
  </div>
</div>

Hide result