Columns in GP 3.0

Hi there,

This is more of a CSS question than a theme question. The best way to handle grid gap in flexbox is to use margin.

This article may help: https://coryrylan.com/blog/css-gap-space-with-flexbox

I like putting a negative margin-left on the block container, then adding the positive margin-left to each container item.

Hope this helps!

I tried that before posting here (same article). It didn’t work. I guess I will go back to the CSS grid. It’s so much easier to work with it than flexbox for an amateur like me.

Edit: This CSS works when there is no page navigation (e.g. on search pages if the results are less than the number of posts per page). But does not work when there is page navigation because it is the last flex item and I have set its flex basis to 100%.

.separate-containers .site-main::after {
  content: '';
  flex-basis: 32.5%
} 

Or alternatively, is there a way to move the bottom navigation in homepage and archives out of the .site-main class? Perhaps unhook it and hook it before footer? I have tried all tricks, even trying to target second last element in the flex but nothing works when the navigation is there. I still get the spacing when the last items are an even number.

Hi there,

Try this:

@media(min-width: 769px) {
    .site-main {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1em; /* offset article gaps */
    }
    /* Force navigation to fill 100% of row */
    .site-main nav {
        flex: 1 0 100%;
    }

    .site-main article {
        width: calc(50% - 1em); /* remove margin-left from width */
        margin-left: 1em;
    }
}

@diggeddy thanks for your input. One small issue is that the code leaves a margin on the far-left. The far-right has no margins though. Do you have a solution to this?

Edit! seems adding !important to site-main’s -1em solves the issue. But I would appreciate a workaround to stop using the !important.

Solved with aqdding .no-sidebar to .separate-containers.no-sidebar .site-main. Thanks everyone!

@diggeddy last question, the last one or 2 flex items (except the last one) leave a margin at the bottom (the one occupied by site-main>*) when there is no page navigation (e.g if a search term returns less number of items than the pages assigned per page). Is there a way to remove this margin? See this image https://prnt.sc/uhxhq5

solved using .site-main{margin-bottom:0;}.site-main>*,.site-main>:last-child{margin-bottom:18px}

Glad we could be of help.

Works fine, but how can I exclude it in the mobile version?

My website.

Hi @face0ff

you can you set CSS resposnively using media queries – this document explains how:

https://docs.generatepress.com/article/responsive-display/

If you need any further assistance please raise a new support topic as this is resolved.

Thank you David! I found a solution. I only set the rules only desktop.

/* 2 Columns for Archive & Blog Page for Desktop */
@media (min-width: 1025px) {
body.archive .site-main, body.blog .site-main {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1em!important; /* offset article gaps */
    }
    /* Force navigation to fill 100% of row */
body.archive .site-main nav, body.blog .site-main nav {
        flex: 1 0 100%;
    }

body.archive .site-main article, body.blog .site-main article {
        width: calc(50% - 1em); /* remove margin-left from width */
        margin-left: 1em;
    }
}

• This reply was modified 4 years, 2 months ago by face0ff.
• This reply was modified 4 years, 2 months ago by face0ff.
• This reply was modified 4 years, 2 months ago by face0ff.

Glad to hear that!