For the past two days, I've been attempting to recreate a brick layout similar to the one shown in the image attached below using CSS. However, my efforts have been unsuccessful so far. Please refer to the image for reference.
In order to achieve this layout, I created some code to emulate the first row (the row containing 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>
Here is the corresponding 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 concept behind this code was to assign each div a fixed percentage width of the parent div to create a brick-like structure that adjusts responsively. Each child div was intended to have a background image. Although the layout is functional, it collapses at certain viewports causing the last child div to move to the next line.
I also created a demonstration on CodePen to showcase this issue: https://codepen.io/Ali_Farooq_/pen/oobBYj
I'm puzzled as to why the children divs shift to the second line even though their combined width is less than 100% of the parent div. Additionally, I aim to design the layout without any white space on either side of the child divs. If anyone has a solution involving JavaScript/jQuery, I'm open to trying that approach as well.
Thank you!