w3-css: Responsive 3 columns layout with different height blocks

Question

I am trying to build a responsive web layout with w3.css. It is supposed to consit of rows with three columns on large screens, two on medium, and one column on small/mobile devices. Each row consists of tiles which can have one of two fixed heights.

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding ">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

I'd expect the following result in a large screen in 3 columns layout:

The above code is fine with a one and two column layout, but produces the following unwanted output with three columns:

If I end the w3-row-padding after three tiles, the three column layout is ok, but I get a mess with medium screens with two columns

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

This is what the above code produces on medium screens:

Any help is appreciated

David Taiaroa · Answer 1 · 2017-12-10T12:41:02.473

Would this do the trick for you? https://codepen.io/panchroma/pen/BmXOOe

HTML is exactly as you posted except that I've added the class of 'parent' to the w3-row-padding. We'll use this class to target child columns with the CSS.

HTML

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding parent">  <!-- note new class in this line -->
     .... 
    </div>  
  </div>

CSS is

@media (min-width: 993px){
  .parent .w3-col:nth-child(3n + 1){
    clear:left;
  }
}

The logic in this css is when the viewport is 993px or wider (the width at which the w3.css grid changes from 2 columns wide to 3 columns wide), use the nth-child selector to select the 1st, 4th, 7th, 10th, ... (3n +1) column in the row and apply the rule of clear:left. This ensures that this column will float to the start of the next row.

More info about how the nth-child selector works:
https://css-tricks.com/how-nth-child-works/

Hope this helps!

Many thanks, David, that works perfectly. Cool stuff, the nth-child selector, did know about that one. — Patrick Wunsch, Dec 11 '17 at 08:51
To make things complete: Adding the following code to the css will set the correct clearings on displays with a two column layout: `@media (max-width: 992px) { .parent .w3-col:nth-child(2n + 1){ clear:left; } }` — Patrick Wunsch, Dec 22 '17 at 15:22

w3-css: Responsive 3 columns layout with different height blocks

1 Answers1