Native WP Containers
Groups, Rows, and Columns are the basic, native containers of the WordPress block editing system. They are used to group and contain the more basic blocks, such as Headings, Paragraphs, Images and Buttons.
Group Block
Group (Full width, no background color)
The content inside this section is contained inside a native WP Group. The Group’s alignment is set to ‘Full width’ and its ‘Layout’ panel setting “Inner blocks use content width” is turned OFF so that inner blocks are not restricted in width. While no padding is added to the top or bottom of this Group, left and right padding is added to these inner blocks so the text does not reach all the way to the edge of the screen. Even images get some padding:
However, you can disable the left & right padding at the individual block level if you wish. In this Paragraph block’s case, the padding has been set to ‘0’ and therefore the text stretches to the edge of the screen.
As you can see, the blocks within this Group fill the entire width of the page when there is no background color set on the Group. New let’s set a background color to the Group in the following example to show the difference when a background color is set…
Group (Full width, w/ background color)
This Group is essentially the same as the one above it, but a light blue background has been set and therefore, padding is automatically added to the Group.
In a nutshell, a Group with no background color has no padding, but a Group with a background color gets padding added automatically to all four sides of the container.
Group (Full width w/ Content width @ 1164px)
This Group is the same as the above, but the ‘Layout’ setting ‘Inner blocks use content width’ has been turned ON and the ‘Content’ field has been set to 1164px.
This gap (AKA the ‘Block gap’) separating this block from the one above it can be eliminated by setting this Group’s top margin to ‘0’.
Group (Wide width w/ Content width @ 1164px)
This Group is a copy of the one above, but its alignment has been set to ‘Wide width’ and the Top Margin has been set to ‘0’ to eliminate the Block gap mentioned above.
Note how there’s zero padding at the sides. If needed, Padding can be added in the Group’s ‘Styles’ tab, under ‘Dimensions’.
Group (Wide width w/ Content width @ 1164px)
Here’s the same block as above but with some left and right padding added.
Group (Wide width w/ Content width @ 764px)
This Group is a copy of the one above minus the left & right padding, and the ‘Layout’ setting’s ‘Content’ field has been set to 764px.
This gap separating this block from the one above it can be eliminated by setting this Group’s top margin to ‘0’.
Row Block
Row
This content is in a full-width native WP Row. A Row’s default setting displays its inner blocks horizontally, but the setting can be changed to ‘Stack’ the blocks vertically as in the example below.
A Row can be styled with text/link/background colors as well as padding and margins. And when the content in any one particular block gets really long (like this paragraph, for example), the height of all the blocks scale dynamically so that they’re roughly equal in height, but not in width. Spacing between blocks has been set with the ‘Block Spacing’ setting.
Row (stacked)
Content inside this light gray area is contained in a full-width native WP Row that has been “stacked”.
Stacking a Row forces its inner blocks to display vertically & these blocks are evenly spaced in the height of the container (causing paragraphs to not match their normal spacing); for this reason, stacked Rows are best used for elements other than text, such as buttons & images. This stacked row has its top margin set to ‘0’ so that there is no gap between this Row and the one above it. Neat!
Columns Block
Columns (full-width)
The content inside this light blue area is contained in a native WP Columns block.
And each block of text is in its own Column block. There are three Column blocks within the containing Columns block. Each inner Column can be adjusted by percentage & styled independently!
Columns (wide-width)
The content inside this light blue area is contained in a native WP Columns block.
And each block of text is in its own Column block. There are three Column blocks inside this Columns block. Each inner Column can be adjusted by percentage & styled independently!
Ungrouped Blocks
Ungrouped
The content within this section are ungrouped blocks – they’re not contained inside a Group, Row or Column – so by default, they are restricted by the Content width that’s set at the template ‘Styles’ level.
The styling of blocks that are outside of a Group, Row, Column, or any other type of container is limited to the styling options of that particular block.
Spectra Blocks
The Spectra plugin offers a set of blocks that are more powerful than the basic, native blocks of the WordPress block editing system. Here are some examples of Spectra Containers.
Container Block
Container (outer full width, inner full width)
The Spectra Container block acts similarly to a native WP Group, but is more advanced and has many additional styling options that a Group lacks.
By default, a Container has no padding, but padding can be set globally to all Spectra Containers via ‘Spectra > Settings > Editor Options > Container Padding’. Or padding can be set at the individual Container level in ‘Style > Spacing > Padding’.
Note how a Container stacks its inner blocks vertically on both desktop and mobile devices, but because it is a Flexbox-based container, it can also act like a native WP Row, as in the example below…
Container (outer full width, inner full width)
‘This Container is a copy of the one before it, but the only difference is that its ‘Flex Properties’ setting is set to ‘Row’ and now it has a light gray background color.
Note: to apply the padding & Block Spacing of native Groups & Rows, add the following classes to the Container:
Container (outer full width, inner boxed)
In this Container’s ‘General > Container’ setting, this container is set to have its inner blocks constrained to the default content width established by the page template (1164px).
Spectra has some cool additional blocks too, like the easy to style email Form block:
Controlling the form’s width is easy – put the form block inside a Group, then set the width of the Group! A width of 700px is recommended for best performance on desktop & mobile devices.
Container (outer boxed)
This is a Container set to ‘Boxed’.
Below is another variation of a Spectra Form, perfect for lead generation!
GenerateBlocks
The GenerateBlocks plugin offers 5 basic, but extremely powerful & customizable blocks that can handle everything a website needs in terms of layout, text and images. Here are some examples of GB Containers.
Container Block (Outer Only)
Container (outer only, full width)
This is a full-width GenerateBlocks Container that does not include an inner container.
The Container has a light blue background so that you can see the area of the container. And top and bottom padding (20px) has also been applied.
GB Containers are super powerful because separate settings can be applied per device width (desktop, tablet, mobile).
Container (outer only, wide width)
This is a copy of the above Container, but set to ‘Wide width’.
You can also see that there’s no side padding now. That’s because the above container (set to Full width) is making use of this page template’s default side padding (24px). Add side padding to Wide width “outer only” containers like this in the ‘Spacing > Padding’ setting of this Container block.
Container Block (Outer + Inner)
Container (outer + inner, full width)
When you add a new GB Container block, the interface will recommend that you add an inner container. I recommend doing this for the sake of more powerful layout control.
Here’s a GB Container with a nested inner container. All the text you see here is inside the inner container. A nested container like this allows you to control the padding on both the outer and inner containers independently.
In this example, the inner container has a light gray background and no padding, and the outer container has a dark gray background. But you can’t see the outer container’s dark gray background color because the inner container spans the same width and height as the outer container!
Now let’s look at a copy of this inner + outer container below, but with the inner container constrained by the default content width of the page.
Container (outer + inner, full width)
This is a copy of the container above, but the inner container’s ‘Sizing > Max Width’ setting has been set to the global default width of 1164px.
Also, to center this inner block on the page, it’s ‘Spacing’ setting for left and right margins have been set to ‘auto’.
Now, we’ll make a copy of this and add some padding to both containers…
Container (outer + inner, full width)
This is a copy of the container above, but the inner container’s ‘Sizing > Max Width’ setting has been set to use the global default width of 1164px.
Centering of inner containers is achieved automatically by auto-application of ‘auto’ to its left and right margins, as you can see in the ‘Spacing’ settings of this container.
Left and right padding is for inner blocks is automatic (padding is actually applied to the blocks inside it), but padding can also be adjusted manually when the class contained is added to the inner container in the ‘Advanced’ setting. This class also forces the container to adhere to the set ‘Max Width’ of the container when custom left & right padding is applied (so that the container doesn’t expand beyond the max-width).
Hello!
Grid container 1
Grid container 2
Grid container 3