Brick layout in CSS

Question

I have been trying to create a brick layout like in the attached image in CSS for two days without any success. Please see the attached image

To achieve this layout I have written some code. I have tried to replicate the first row (the row 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 the 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 they will align in a brick format and be responsive. Then I was going to give each of the children div a background image. My layout works but at some view ports it breaks and the last child div shifts to the second line.

I have also make a codepen demo 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>

I cannot understand that even though the total sum of the children divs equals to less than 100% of the parent, why they shift on the second line. One more thing...I'm trying to design the layout such that there is no white space either on the left side or the right side of the children divs. If anyone has a solution for this with JavaScript/jQuery then that will also work for me.

Thanks!

Answer 1

Using display:flex you can much more easily create "brick" like wall, and you can use flex-grow properties to control container widths much more easily than using percents.

Just for kicks, here's an example you can play with. Changing flex-grow values on any nth of brick type you can create a more random pattern too. It's totally flexible.

Plus with Flex box, you can more easily control your text alignment using align-items and justify-content on your "bricks".

In the provided example we are basically setting all bricks to a flex-grow: 2. So being the same, they'll all flex to the same size and occupy the same amount of space in each row. Then we can use pseudo selectors to find even rows and the first and last brick in those even rows, and make the flex-grow:1 (or half of two) in order to make half bricks on each end.

.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>