Encountering a peculiar issue while attempting to organize items spread across multiple rows, with each row having either 5 or 4 items (alternating between 5 and 4 items per row). However, when the screen width reaches 480px, the layout automatically switches to two items wide regardless of the number in each row. This results in a layout problem between the rows with 4 items and those with 5 items. When they are stacked on top of each other, the rows with 4 items display correctly as 2x2, but the rows with 5 items have an empty space at the end of the row (appearing as 2x2x1).
Layouts:
2x2 row layout (with blank item issue)
HTML:
<section id="rowArea">
<div class="row fiveRow clearfix">
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
</div>
<div class="row fourRow clearfix">
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
</div>
<div class="row fiveRow clearfix">
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
<div class="rowItem"></div>
</div>
</section>
CSS:
/* Screen Width > 480px */
#rowArea {width:810px; height:auto; }
.row {height:100px; }
.fourRow {width:80%; padding:0 10%; }
.fourRow .rowItem {width:25%; height:100px; float:left; }
.fiveRow {width:90%; padding:0 5%; }
.fiveRow .rowItem {width:20%; height:100px; float:left; }
/* Screen Width < 810px */
#rowArea {width:100%; height:auto; }
/* Screen Width < 480px */
#rowArea {width:100%; height:auto; }
.row {height:100px; }
.fourRow, .fiveRow {width:100%; padding:0 0; }
.fourRow .rowItem, .fiveRow .rowItem {width:50%; height:100px; float:left; }
How can I adjust the structure and styling to get rid of the empty space at the end of the 5-item rows? Appreciate any assistance provided!