Can this responsive grid be formatted properly

Question

I've got a grid of images that I'd like to display as in the image here:

Unfortunately the bottom row are pushing down out of alignment.

I'm adapting Graham Miller's Responsive Grid System, which is wonderful. Here's the code I have so far:

CSS:

/*  SECTIONS  */
    .section {
        clear: both;
        padding: 0px;
        margin: 0px;
    }

    /*  COLUMN SETUP  */
    .col {
        display: block;
        float:left;
        margin: 1% 0 1% 1.6%;
    }
    .col:first-child { margin-left: 0; }

    /*  GROUPING  */
    .group:before,
    .group:after { content:""; display:table; }
    .group:after { clear:both;}
    .group { zoom:1; /* For IE 6/7 */ }


    /*  GRID OF SIX  */
    .span_6_of_6 {
        width: 100%;
    }

    .span_5_of_6 {
        width: 83.06%;
    }

    .span_4_of_6 {
        width: 66.13%;
    }

    .span_3_of_6 {
        width: 49.2%;
    }

    .span_2_of_6 {
        width: 32.26%;
        height: 350px;
    }

    .span_1_of_6 {
        width: 15.33%;
    }

    img {
        width: 100%;
        height: auto;
    }
    /*  GO FULL WIDTH BELOW 480 PIXELS */
    @media only screen and (max-width: 480px) {
        .col {  margin: 1% 0 1% 0%; }
        .span_1_of_6, .span_2_of_6, .span_3_of_6, .span_4_of_6, .span_5_of_6, .span_6_of_6 { width: 100%; }
    }

HTML:

<div class="section group">
    <div class="col span_2_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices03.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>
<div class="section group">
    <div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>
<div class="section group">
    <div class="col span_1_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices03.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices04.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices05.png" alt=""/></div>
    <div class="col span_2_of_6"><img src="images/slices02.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices06.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices07.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices08.png" alt=""/></div>
    <div class="col span_1_of_6"><img src="images/slices09.png" alt=""/></div>
</div>

I've tried several things, including floating the bottom row of five images to the left, resizing the images slightly, and other desperate measures, but all to no avail.

Does anyone know how this issue can be solved?

The page can be viewed at: http://advent-calendar.trainstorm.co.uk/grid-nice.html — Ralphatron, Nov 22 '17 at 14:28
Looks like just the case for `display:grid`. See [this codepen](https://codepen.io/fen1x/pen/NwMxov?editors=1100) — fen1x, Nov 22 '17 at 14:56
Essentially, there is only one layout method that can achieve this and that is CSS-Grid — Paulie_D, Nov 22 '17 at 15:06
CSS Grid Layout: https://stackoverflow.com/q/44377343/3597276 — Michael Benjamin, Nov 22 '17 at 16:03
fen1x - this is a most elegant solution. It looks brilliant: http://advent-calendar.trainstorm.co.uk/grid-nice2.html I'm struggling to make it responsive though. Any tips? — Ralphatron, Nov 22 '17 at 16:47
I'll have a good look at CSS-Grid thanks Paulie_D and Michael_B, although it looks like it'll need to be a long one :o( — Ralphatron, Nov 22 '17 at 16:50

Brian H. · Answer 1 · 2017-11-22T16:28:58.583

Implement both a six column system and a four column system, once that's done, you can do the following:

<div class="section group"> <!-- First row -->
    <div class="col span_2_of_6"> <!-- left side of row -->
        <div class="col span_6_of_6"> <!-- this is for margin consistency -->
            <img src="" alt=""> 
        </div>
    </div>

    <div class="col span_4_of_6"> <!-- right side of row -->
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>

        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
    </div>
</div>

<div class="section group"> <!-- second row -->
    <div class="col span_6_of_6"> <!-- full row -->
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
        <div class="col span_1_of_6"><img src="" alt=""></div>
    </div>
</div>

<div class="section group"> <!-- Third row -->
    <div class="col span_4_of_6"> <!-- left side of row -->
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>

        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
        <div class="col span_1_of_4"><img src="" alt=""></div>
    </div>

    <div class="col span_2_of_6"> <!-- right side of row -->
        <div class="col span_6_of_6"> <!-- this is for margin consistency -->
            <img src="" alt=""> 
        </div>
    </div>
</div>

You may want to add a few custom classes to have more control over your margins.

Thanks Brian. I can see the logic in what you're suggesting. I think I must be missing something though, as it doesn't render as expected at all. I've implemented your suggestion under my own on the page. You can see that there's just no grid at all - just a vertical listing. — Ralphatron, Nov 22 '17 at 16:15
That's more the ticket, but rows 6 to 9 and 20 to 23 are kicked out of line. Any idea what's causing that? — Ralphatron, Nov 22 '17 at 16:45

Can this responsive grid be formatted properly

1 Answers1