Fixed Container sizes

Hi there,

I just looked at your layout and it’s almost perfect. Have you made any adjustments since?

If you want the grid container to be perfectly flush at the bottom, you can add a 20px padding-top on the bottom-right image block.

I’ve recreated the container layout, but I did it slightly differently from how you did it. You can copy the layout I created below. The layout should look like this: https://postimg.cc/V52hcGW0

In the editor, click the three-dot menu at the top and choose the ‘Code Editor’ option. Then, copy and paste the following block HTML into the editor and switch back to the Visual Editor.

<!-- wp:generateblocks/container {"uniqueId":"5485aef3","isDynamic":true,"blockVersion":4,"spacing":{"paddingTop":"30px","paddingBottom":"30px"}} -->
<!-- wp:generateblocks/container {"uniqueId":"194460db","isDynamic":true,"blockVersion":4,"sizing":{"maxWidth":"1200px"},"spacing":{"marginRight":"auto","marginLeft":"auto"}} -->
<!-- wp:generateblocks/grid {"uniqueId":"363c79d7","columns":5,"horizontalGap":10,"verticalGap":10,"isDynamic":true,"blockVersion":3,"className":"main-grid-container"} -->
<!-- wp:generateblocks/container {"uniqueId":"012a9fe6","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"https://melbournebalustrading.com.au/wp-content/uploads/2024/04/Brass-Banisters.jpg","height":2400,"width":1920,"orientation":"portrait"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"40%","widthMobile":"100%","minHeight":"300px"},"className":"container-1"} /-->

<!-- wp:generateblocks/container {"uniqueId":"9182bb4e","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"https://melbournebalustrading.com.au/wp-content/uploads/2024/04/Custom-Handrail.jpg","height":1229,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"60%","widthMobile":"100%","minHeight":"500px"},"className":"container-2"} /-->

<!-- wp:generateblocks/container {"uniqueId":"95b3b2d5","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"https://melbournebalustrading.com.au/wp-content/uploads/2024/04/council-balustyrading.jpg","height":1374,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"40%","widthMobile":"100%","minHeight":"500px"},"spacing":{"marginTop":"-200px"},"className":"container-3"} /-->

<!-- wp:generateblocks/container {"uniqueId":"6eca48f8","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"https://melbournebalustrading.com.au/wp-content/uploads/2024/04/Wire-Rail.jpg","height":1282,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"25%","widthMobile":"100%","minHeight":"300px"},"className":"container-4"} /-->

<!-- wp:generateblocks/container {"uniqueId":"a8e00f98","isGrid":true,"gridId":"363c79d7","backgroundColor":"var(\u002d\u002daccent)","bgImage":{"id":"","image":{"url":"https://melbournebalustrading.com.au/wp-content/uploads/2024/04/Glass-Balustrades-e1713235615830.jpg","height":1280,"width":1920,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"sizing":{"width":"35%","widthMobile":"100%","minHeight":"300px"},"className":"container-5"} /-->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

Glad to hear that!

Hi there,

can you share a link to your site where i can see the issue ?

Hmmm… the collage layout adds more complication here.

I’ll try and explain.
The column container block is a Flex Column. This changes the content flow, so its children ( the inner blocks ) behave differently. And one noticeable affect is the child elements height can collapse.
Which is the issue you see in the collage.

The reason for the overlay to collapse is its height is set to 100%.
As flex column child it will look to its parent container for a height.
But that parent container has only a min-height set ( of 300px ), so the browser cannot calculate an explicit height for the child element.

Whereas the working version, the parent has a min-height of 600px and a height of 100%. It this height value that allows the browser to calculate the height of the column, and pass that to the child.

So if you select the collage container with the min-height of 300px and set its height to 100%. You will see it kinda works as expected…. except you’re hacking the grid with negative margins so in this scenario it won’t work correctly. Instead you would have to set a specific height value eg. height: 300px

But that collage layout will cause you issues using negative margins …..