CODEWITHSUNDEEP
cssresponsive-designframeworksgridunsemantic-css
Kéryh
Kéryh

Reputation: 123

Unsemantic columns height

I use the framework "unsemantic". When I create a grid of 4 columns, if all elements of the grid haven't the same height, the grid breaks ( from the third block ) when I reduce the window.

See here http://cemf.fr/lpem/paul-meyer/

Anyone know how to fix this?

Html :

<article class="grid-50 tablet-grid-50 mobile-grid-100"> 
    /* MY CONTENT HERE */
</article>

Upvotes: 0

Views: 896

Answers (1)

Sudheer
Sudheer

Reputation: 2985

ya it is happening because of the height of your first column.

One way is to create grid-container for every row.

<div class="grid-container">
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
</div>
<div class="grid-container">
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
</div>

Other way is to use clear on your third column ..

Add a class like.

 .article-jury:nth-child(3n){
    clear:both; 
   }

and add in class for the third column

 <div class="grid-container">
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100 clearColumns"> 
        /* MY CONTENT HERE */
    </article>
    <article class="grid-50 tablet-grid-50 mobile-grid-100"> 
        /* MY CONTENT HERE */
    </article>
</div>

Upvotes: 2

Related Questions