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