Stop Staggered Divs with Grids W3.CSS

Question

I am styling my page with W3.CSS and using their repsonsive grid. I have 4 divs that I am looking to have class "w3-col s6 l3" and when W3 detects a small screen, it puts the columns like it should but it staggers them. I am looking to have the tops of the divs be even with each other.

<div class="w3-row">
  <div class="w3-col s6 l3 w3-green w3-center">
    <p>s6</p><p>s6</p><p>s6</p><p>s6</p>
  </div>
  <div class="w3-col s6 l3 w3-dark-grey w3-center">
    <p>s6</p><p>s6</p><p>s6</p>
  </div>
  <div class="w3-col s6 l3 w3-blue w3-center">
    <p>s6</p><p>s6</p>
  </div>
  <div class="w3-col s6 l3 w3-grey w3-center">
    <p>s6</p><p>s6</p><p>s6</p><p>s6</p>
  </div>
</div>

Here is what a large screen looks like:

This is the result of a small screen:

This is what I am looking to accomplish:

I got this example by going to http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_two_equal&stacked=h and adding paragraphs to the sections. I tried making a jsfiddle but didn't have any luck. Anyway, got any ideas on how to get the desired result? Thanks!

This usually happens when you don't use rows properly. Please post your code. — APAD1, Jan 24 '17 at 22:02
The code you posted does not produce the result that you posted a screenshot of — APAD1, Jan 24 '17 at 22:20
There, now its the exact same thing as what is in the images. Sorry about that. — Michael Ortega, Jan 24 '17 at 22:31

Farzin Kanzi · Accepted Answer · 2017-01-24T23:32:14.713

Firstly add this style:

.flex {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
flex: 1;
min-width: 400px;/*or how much you want. It means that if your page has width higher than 800px divs are side by side picture one but if it is lower than 800px they go upon each other picture 3*/
}

.w3-col {
    flex: 1;
/*If you do not use min-width: 400px, here must set a width or min width*/
}

And change you html code to this:

<div>
        <div class="w3-row flex" >
            <div class="flex">
                <div class="w3-col s6 l3 w3-green w3-center">
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                </div>
                <div class="w3-col s6 l3 w3-dark-grey w3-center">
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                </div>
            </div>
            <div class="flex">
                <div class="w3-col s6 l3 w3-blue w3-center">
                    <p>s6</p>
                    <p>s6</p>
                </div>
                <div class="w3-col s6 l3 w3-grey w3-center">
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                    <p>s6</p>
                </div>
            </div>
        </div>
    </div>

Your first solution didnt work. The edited version works, kind of. The spacing of the divs aren't correct. They don't go the full width with flex added. — Michael Ortega, Jan 24 '17 at 22:54
You welcome. And i suggest you to learn flexbox. It is very very useful. And w3schools is good site to learn it. — Farzin Kanzi, Jan 25 '17 at 00:00

score -2 · Answer 2 · answered Jan 24 '17 at 23:00

Might not be exactly what you want,but here is a solution that works nicely with jQuery. This works when the divs are half of the width, you could easily modify it to take any parameters you would want.

$('div:nth-child(2n)').each(function(){
  var height = $(this).height(),
      prevHeight = $(this).prev().height(),
      padding = prevHeight - height;

  if(padding > 1) {
    $(this).css({
      'margin-bottom': padding + 'px'
    });
  }
})

Stop Staggered Divs with Grids W3.CSS

2 Answers2