Responsive grid, equal height

Question

How would i go about achieving this layout, in a responsive scenario (ie 25% width), but each block have the same height:

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

Notice the middle block occupies (50% of the width), that middle block contains text, but the square images are images (that are square, giving its size).

Should i be using display: table mixed with display: table-cell and display: table-row? Or is there nifty css trick.

You might want to look into flex, a quite well supported layout in CSS3. — delCano, Dec 02 '14 at 22:48
Nah duh, its a CSS3 concept. I'm more looking for something that is more browser supported. IE9+. — Marais Rossouw, Dec 02 '14 at 22:51
Sorry. It really is only IE9 that doesn't support it, though: [http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox) — delCano, Dec 02 '14 at 23:05
you can check this question that is similar with a grid of responsive squares : http://stackoverflow.com/questions/20456694/grid-of-responsive-squares/20457076#20457076 — web-tiki, Dec 03 '14 at 08:30

score 0 · Answer 1 · answered Dec 03 '14 at 00:33

Flexbox is really cool but we are not yet at 100% for support, so I do not yet use it. I would probably check out something like www.shelvesgrid.org. Then have a width: 100% on the images within the boxes and if they are all perfectly square, it should work.

Your structure will look like this:

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

An your CSS is just img {width: 100%}

Responsive grid, equal height

1 Answers1