How to make a 3 column fully responsive image grid in HTML/CSS?

Question

What would be the best way to go about making a 3 column fully responsive image grid with a 10px margin on the left/right of the center image (responsive from 1280px all the way down to 320px) in HTML/CSS that has extensive cross-browser support?

Could I use a CSS propert such as: column-count? Is there a better way to achieve this?

Answer 1

Your format itself is quite simple...

Let's assume this basic format at desktop size...

|*****|*|*****|*|*****|
|     | |     | |     |
|     | |     | |     |
|*****|*|*****|*|*****|

So, let's use 3.8% margins.

We need to calculate the width of our columns based on those margins. We have two margins at 3.8% = 7.6%.

100% - 7.6% = 92.4% / 3 columns = 30.8%

So...

CSS:

.container { width: 100%; max-width: 1280px; min-width: 320px; margin: 0 auto; clear: both; }

.col-3 { float: left;  width: 30.8%; margin-right: 3.8%; }

.last { margin-right: 0; }

HTML:

<div class="container">
    <div class="col-3">
    </div>
    <div class="col-3">
    </div>
    <div class="col-3 last">
    </div>
</div>

You will want to use media queries to adjust this to a single column layout for mobile.