Отзывчивые сетки, равная высота

Question

Как бы я идти о достижении этой компоновки, в реагирующих сценариях (т.е. ширина 25%), но каждый блок имеет одинаковую высоту:

_ _ _ _ 
|_|_|_|_| 
|_|___|_| 
|_|_|_|_| 

Обратите внимание на среднем блоке занимает (50 % от ширины), этот средний блок содержит текст, но квадратные изображения - это изображения (квадратные, дающие его размер).

Должен ли я использовать display: table, смешанный с display: table-cell и display: table-row? Или есть отличный трюк.

Answer 1

Flexbox действительно классный, но мы еще не на 100% на поддержку, поэтому я пока не использую его. Я бы, наверное, посмотрел что-то вроде www.shelvesgrid.org. Тогда у вас есть ширина: 100% на изображениях внутри ящиков, и если они все совершенно квадратные, это должно сработать.

Ваша структура будет выглядеть следующим образом:

<div class="row"> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
</div> 

<div class="row"> 
    <div class="column-3"></div> 
    <div class="column-6"></div> 
    <div class="column-3"></div> 
</div> 
<div class="row"> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
    <div class="column-3"></div> 
</div> 

ваш CSS просто IMG {ширина: 100%}