[Resolved] Flexbox grid layout

[George]

I use ACF to display related products (not Woo Commerce, it’s just a custom post type) at the bottom of the single page template. It all works fine but I am unsure of how to style it. Basically, I am after a 4 column grid that becomes two columns on tablet and one column on mobile along with gutters between columns apart from the mobile version. I am skeptical of using Unsemantic CSS since I know it’s going to become incompatible when GP switches to Flexbox.

My HTML markup for the item is this:

<div class="flex-grid">
    <div class="col">
        <a href="#">
            <img src="url-of-image">
        <h3>Product title</h3>
        </a>
    </div>
</div>

Obviously, this is inside a foreach loop to populate all related products selected from the backend.

Can you give me some Flexbox CSS to achieve the grid layout I am after? Feel free to modify the HTML markup if necessary.

[David]

Hi there,

try this:

@media (min-width: 768px) {
    .flex-grid {
        display: flex;
        flex-wrap: wrap;
        margin-left: -20px;
    }

    /* 2 column tablet */
    .flex-grid>.col {
        flex: 1 0 50%;
        padding-left: 20px;
        box-sizing: border-box;
    }
}

@media (min-width: 1024px) {
    /* 4 column desktop */
    .flex-grid>.col {
        flex: 1 0 25%;
    }
}

[George]

Works like a charm, David, thank you!

[David]

Awesome – glad to be of help.

[Author]

Posts