[Resolved] Flexbox grid layout

Home Forums Support Flexbox grid layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1266886
    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.

    #1267260
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1267635
    George

    Works like a charm, David, thank you!

    #1267643
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.