[Resolved] Grid-Layout question

[Stefanie]

Hi,

I discovered this beautiful example and would like to ask how I can implement it:
https://prnt.sc/AsOIiKsV41_5

I’ve already tried, but I can’t get everything to close on one line at the bottom.

Are these photos in the grid containers set as container-background or are they images (blocks) that have been inserted there?
Do these images then have to have a certain format so that it all fits?
Do I have to set a certain padding in the containers?

I always have the problem that the images at the bottom are not on a line 😕

Thanks very much for help!

[Leo]

Hi Stefanie,

That looks like a section from the Info template in our site library.

If you have a staging site or a local host – the best and easiest thing to do is to import the template in a fresh install so you can see exactly how it was done.

It’s actually using the query loop block with the grids.

I’ve taken some key screenshots here:
https://www.screencast.com/t/qKt1xtQ1Hc
https://www.screencast.com/t/KB5HV6Xaeo

And here is the CSS for that first container:

.full-height,.full-height > .gb-inside-container {
	height: 100%;
}

Try to get started with that and let me know if you get stuck 🙂

[Stefanie]

Thanks, Leo, that was the crucial hint!
I didn’t know it was coming from the template “Info”, but now it’s obvious! Ok, I’ll install Info now and try to recreate it.

My point is to build this pattern in a grid block, not via a query loop. But as far as the layout is concerned, it shouldn’t really make any difference, right?

[David]

Hi there,

in that example its using 2 x Query Loop blocks inside a 2 column grid block 🙂

Are you simply wanting that same layout but using static content ?

[Stefanie]

Hi there,

>> Are you simply wanting that same layout but using static content ?
Yes, exactly. I am trying to recreate the layout only with the grid block, there is no query loop involved.
But so far I failed because I didn’t know how to bring the columns to the same height. I always have the problem that the images at the bottom are not on a line.

[David]

Yeah Grids like that can be a pain.
Create a draft page.
From the Top Bar 3 dot menu switch to the Code Editor
Paste this code in:

<!-- wp:generateblocks/container {"uniqueId":"911a8c28","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"f3e42fc7","columns":2,"horizontalGap":"10","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"7b5eb156","isGrid":true,"gridId":"f3e42fc7","width":50,"widthMobile":100,"minHeight":200,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","textColor":"var(\u002d\u002dbase-3)","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/200/300"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"verticalAlignment":"flex-end","innerZindex":1,"shapeDividers":[],"isDynamic":true,"blockVersion":2,"opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[],"advBackgrounds":[]} -->
<!-- wp:generateblocks/headline {"uniqueId":"d1508ad4","element":"div","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":18,"iconColor":""} -->
<div class="gb-headline gb-headline-d1508ad4 gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"0273f0cd","isGrid":true,"gridId":"f3e42fc7","width":50,"widthMobile":100,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"ebc2f4a1","columns":4,"horizontalGap":10,"verticalGap":10,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"78bf32df","isGrid":true,"gridId":"ebc2f4a1","width":50,"widthMobile":100,"minHeight":200,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"textColor":"var(\u002d\u002dbase-3)","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/200/300"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"verticalAlignment":"flex-end","innerZindex":1,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"06ac2bcc","element":"div","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":18,"iconColor":""} -->
<div class="gb-headline gb-headline-06ac2bcc gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"1c1b7824","isGrid":true,"gridId":"ebc2f4a1","width":50,"widthMobile":100,"minHeight":200,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"textColor":"var(\u002d\u002dbase-3)","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/200/300"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"verticalAlignment":"flex-end","innerZindex":1,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"f2a8ee39","element":"div","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","fontSize":18} -->
<div class="gb-headline gb-headline-f2a8ee39 gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"21da96f6","isGrid":true,"gridId":"ebc2f4a1","width":50,"widthMobile":100,"minHeight":200,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"textColor":"var(\u002d\u002dbase-3)","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/200/300"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"verticalAlignment":"flex-end","innerZindex":1,"removeVerticalGap":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"3515bc72","element":"div","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":18,"iconColor":""} -->
<div class="gb-headline gb-headline-3515bc72 gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"3475cf2e","isGrid":true,"gridId":"ebc2f4a1","width":50,"widthMobile":100,"minHeight":200,"paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingSyncUnits":true,"textColor":"var(\u002d\u002dbase-3)","bgImage":{"id":"","image":{"url":"https://picsum.photos/id/237/200/300"}},"bgOptions":{"selector":"pseudo-element","opacity":1,"overlay":false,"position":"center center","size":"cover","repeat":"no-repeat","attachment":""},"verticalAlignment":"flex-end","innerZindex":1,"removeVerticalGap":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"0dab9c18","element":"div","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","fontSize":18,"iconColor":""} -->
<div class="gb-headline gb-headline-0dab9c18 gb-headline-text">Some text</div>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->

And switch back to the visual editor.

Notes:
1. The top level grid ( of 2 columns )
– leave the vertical alignment as default this will keep the 2 columns the same height.
– give it some Horizontal gap for space between the 2 columns.

2. The second columns inner Grid block
– again leave vertical alignment as default
– set the horizontal and vertical gap*
* the gap can be removed from individual containers – see below

3. Second columns grid block inner containers
– set a minimum height for each container.
– for the bottom two containers check the Remove Vertical Gap option. This will get rid of the space below them.

5. Top level grid first column
– set its minimum height to a value that is LESS then the combined height of its sibling grid.

Hope that helps

[Stefanie]

WOW, thanks a lot, David, this works great!
Until now I didn’t know what this toggle (Remove Vertical Gap) is supposed to be good for, but now I know.

Works like a charm and I’m happy with that 🙂

[David]

Super glad to hear that 🙂

[Author]

Posts