Несемантическая высота столбцов

Question

Я использую рамки "не семантические". Когда я создаю сетку из 4 столбцов, если все элементы сетки не имеют одинаковую высоту, сетка разрывается (из третьего блока), когда я уменьшаю окно.

Смотрите здесь http://cemf.fr/lpem/paul-meyer/

Кто-нибудь знает, как это исправить?

HTML:

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

Answer 1

Да, это происходит из-за высоты вашего первого столбца.

Одним из способов является создание grid-container для каждого ряда.

<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>

Другой способ заключается в использовании clear на вашей третьей колонке..

Добавить класс как.

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

и добавить в класс для третьего столбца

 <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>