Hero Layout – 75 25

.wp-block-group.alignfull

.wp-block-columns.has-2-columns.has-2-columns–-75-25

.wp-block-column .wp-block-cover

.wp-block-column .wp-block-group

CUSTOM GRID LAYOUTS

This method is encouraged in place of the default classes from the Gutenberg Columns Block which inlines flex styles. Just add a Group Block followed by a Columns Block with the classes listed below to create the following layouts:

2 Col Grid Layout – Content, Sidebar Equal Columns

class="has-2-columns"

Main Content

The columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect. 

Sidebar

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

2 Col Grid Layout – Content, Sidebar

class="has-2-columns content-sidebar"

Main Content

The columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect. 

Sidebar

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

2 Col Grid Layout – Sidebar, Content

class="has-2-columns sidebar-content"

Sidebar

The columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect. 

Main Content

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

2 Col Grid Layout – Content, Sidebar 70-30

class="has-2-columns has-2-columns--70-30"

Main Content

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

Sidebar

The columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect. 

2 Col Grid Layout – Content, Sidebar 30-70

class="has-2-columns has-2-columns--30-70"

Main Content

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

Sidebar

The columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect. 

2 Col Grid Layout – Content, Sidebar 60-40

class="has-2-columns has-2-columns--60-40"

Main Content

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

Sidebar

The columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect. 

2 Col Grid Layout – Content, Sidebar 40-60

class="has-2-columns has-2-columns--40-60"

Main Content

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

Sidebar

The columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect.