Равные строки высоты в сетке CSS

Question

Я использую простую сетку сетки (http://www.modestgrid.com/) с фиксированным количеством строк. Есть ли простой способ сделать все строки одинаковой высоты без указания высоты класса .row в процентах?

Мой класс строка 6 строк выглядит следующим образом:

.row { 
    height: 16.666%; 
    padding-bottom: 5px; 
} 

.row:last-of-type { 
    padding-bottom: 0; 
} 

Есть ли способ, чтобы не указывать height: 16.666%; и иметь CSS автоматически делают все строки, одинаковую высоту и иметь их вертикально заполнить их контейнер элемент?

Я полагаю, что для этого я мог бы использовать <table> или JavaScript, но я надеялся на чистое решение CSS. Мне нужно поддерживать IE10 и все последние другие распространенные браузеры.

Answer 1

дисплей: стол.

It's supported in IE8+ and has a decent support in other browsers as well.

html, 
 
body, 
 
.wrapper { 
 
    height: 100%; 
 
} 
 
.wrapper { 
 
    display: table; 
 
} 
 
.row { 
 
    display: table-row; 
 
    padding-bottom: 5px; 
 
} 
 
.row:last-of-type { 
 
    padding-bottom: 0; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <div> 
 
     Row 1 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div> 
 
     Row 2 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div> 
 
     Row 3 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div> 
 
     Row 4 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div> 
 
     Row 5 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div> 
 
     Row 6 
 
    </div> 
 
    </div> 
 
</div>

Решение без скромной сетки: JSFiddle

Решение со скромной решеткой: JSFiddle