[Resolved] Latest post grid?

[Marijke]

Hi!

I’ve been experimenting with the Grid block. Is there a way to display latest posts in a grid like the one here over at Budget Bytes? https://www.screencast.com/t/uy173JZRYIt

It’s all just a bit too much to figure out on my own it looks like. I’ve looked at the Grid instruction page but my results are all misaligned. I know this won’t even display on mobile, but would still like to try and learn.

[David]

Hi there,

can i see what you have so far ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marijke]

I mean, not really haha. I deleted everything since it was clearly not going to work out. Is it supposed to be container > grid > 3x container > grid with dynamic image background > …? I can’t get the two containers that contain the double image to be the same height as the one with the single image, as there’s no max container size. I’m aware there’s another way to get it to work, but I can’t figure it out. I’m also still not even sure what element, dynamic blocks etc. to choose so it displays the latest posts.

Sorry! I’ve just more or less gotten the hang of the columns but now the grid has got me beat.

[David]

Ok, so lets try this:

1. On a blank page, one preferably set to a Full Width container, in the 3 dot menu, switch to Code Editor

2. Paste in this HTML to the editor:

<!-- wp:generateblocks/container {"uniqueId":"d6979f32","paddingTop":"40","paddingRight":"40","paddingBottom":"40","paddingLeft":"40","paddingSyncUnits":true,"fontSize":16,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/query-loop {"uniqueId":"e23ed1b5","query":{"post_type":"post","per_page":"5"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"14044766","columns":1,"isDynamic":true,"blockVersion":2,"isQueryLoop":true,"lock":{"remove":true},"className":"post-overlay-grid"} -->
<!-- wp:generateblocks/container {"uniqueId":"598fff7e","isGrid":true,"isQueryLoopItem":true,"gridId":"14044766","width":100,"minHeight":300,"paddingTop":"1","paddingRight":"1","paddingBottom":"1","paddingLeft":"1","paddingUnit":"em","paddingSyncUnits":true,"bgImageInline":true,"verticalAlignment":"flex-end","isDynamic":true,"blockVersion":2,"useDynamicData":true,"dynamicContentType":"featured-image","lock":{"remove":true,"move":true}} -->
<!-- wp:generateblocks/headline {"uniqueId":"e1f5f70f","backgroundColor":"var(\u002d\u002dbase-3)","textColor":"","fontSize":2,"fontSizeUnit":"em","marginBottom":"0.25","marginUnit":"em","paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","paddingSyncUnits":true,"useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-e1f5f70f gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"a9a492ea","element":"div","backgroundColor":"var(\u002d\u002dbase-3)","textColor":"","fontSize":0.8,"fontSizeUnit":"em","paddingTop":"5","paddingRight":"5","paddingBottom":"5","paddingLeft":"5","useDynamicData":true,"dynamicContentType":"post-date","opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[]} -->
<div class="gb-headline gb-headline-a9a492ea gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/query-loop -->
<!-- /wp:generateblocks/container -->

3. Switch back to visual editor.

Note: the Grid Block has an Advanced > Additional CSS CLass of: post-overlay-grid

4. Now add this CSS:

@media(min-width: 769px) {
    .post-overlay-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 10px
    }
    .post-overlay-grid :first-child {
        grid-row: 1/-1;
    }
}

@media(min-width: 1024px) {
    .post-overlay-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Marijke]

Oh man, that’s exactly it. I hope you didn’t spend a lot of time putting that together for me! Is this something I could have done just editing blocks, or is it really something that requires the HTML/CSS input?

[David]

5 minutes 🙂
So the HTML is 100% what i built in the block editor.
Any page you view in Code view you can copy and paste its HTML. Its just an easy way of me sharing it with you.
If you switched back to the visual editor, then you can edit those blocks however you need.

The CSS was a requirement, as we don’t currently have CSS Grid in GenerateBlocks, and for that layout it by far the best way to go!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts