Arranging rows with alternating counts of items with CSS in a responsive layout

Question

Running into a strange issue trying to arrange items that are placed in multiple rows, each row containing either 5 or 4 items (alternating 5 items, 4 items, 5 items, etc...). However, at 480px screen width, the layout switches simply to 2 items wide no matter how many in each row. This creates a layout issue between the 4-item rows and 5-item rows. When they're stacked on top of each other the rows with 4 work fine (2x2), but the rows of 5 have a hanging item/blank spot at the end of the box (2x2x1).

4/5 Row Layout: enter image description here

2x2 row layout (with hanging item issue) enter image description here

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 do i restructure this/style this to eliminate the blank spot at the end of the 5-item rows? Any help is much appreciated!

Would it be acceptable to have the first row from the following set take up that blank spot or do you want separation between the three item rows? — essmahr, Dec 05 '13 at 21:53

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

It's probably the clearfix class that is causing those gaps. A clearfix class is meant to force an element to contain any floated child elements. Remove that class, and set your mobile css on .row to height: auto and the child elements should float against each other.

basic example: http://jsfiddle.net/gv5jL/1/

edited May 23 '17 at 12:03

Community

1
1

answered Dec 05 '13 at 22:11

essmahr

676
4
15

Arranging rows with alternating counts of items with CSS in a responsive layout

1 Answers1