[Resolved] Content container / GB container front-end results

[Paul]

Hi

Can you tell me what causes two different layouts between the URLs below? Container block on both pages set to full width, content container on both pages is set to full width…but the front end result is different?

Container on the second URL has a grid block inside, no grid block on the first page.

Full width v contained layouts is something I still struggle to understand with GenerateBlocks.

Also, would it be possible for the container block to automatically inherit the container padding set in the customizer? Is there a reason this doesn’t already happen?

Thanks,
Paul.

[Elvin]

Container block on both pages set to full width, content container on both pages is set to full width…but the front end result is different?

The result is different because the layout is 100% different. Container block and grid block may seem similar at times but they serve their own difference purpose.

The second URL’s, as you mentioned, uses Grid block placed inside a container block.

This grid block uses display:flex css property. Its intended purpose is to display rows and columns which is basically what you see on the second URL. (1 row, 2 columns per Grid Block)

On the other hand, first URL uses plain container block inside a container block. Container blocks serves plainly as a container with no special layout.

That said, the first page’s container block layout pretty redundant unless of course you want to purposely have an extra <div> wrapper for your contents for whatever purpose. Ex: making contents take only 50% width

Also, would it be possible for the container block to automatically inherit the container padding set in the customizer? Is there a reason this doesn’t already happen?

These blocks have their own settings specified on the plugin unless purposely overwritten by CSS.

While it is possible to make these blocks inherit the settings on the customizer, it is tedious because you have to check its parent element, grandparent element, great grandparent element and so on to make sure they don’t have their own paddings that’ll prevent your block from inheriting the customizer paddings.

[Paul]

Hi, thanks for your detailed reply. I’ll definitely keep this for reference 🙂

[Elvin]

Awesome. No problem.:)

[Author]

Posts