Title: A walk-through of layout classes in WordPress 6.1
Author: Justin Tadlock
Published: January 11, 2023
Last modified: March 13, 2023

---

 * [Showcase](https://wordpress.org/showcase/)
 * [Plugins](https://wordpress.org/plugins/)
 * [Themes](https://wordpress.org/themes/)
 * [Hosting](https://wordpress.org/hosting/)
 * [News](https://wordpress.org/news/)
    - [Learn WordPress](https://learn.wordpress.org/)
    - [Documentation](https://wordpress.org/documentation/)
    - [Education](https://wordpress.org/education/)
    - [Forums](https://wordpress.org/support/forums/)
    - [Developers](https://developer.wordpress.org/)
    - [Blocks](https://wordpress.org/blocks/)
    - [Patterns](https://wordpress.org/patterns/)
    - [Photos](https://wordpress.org/photos/)
    - [Openverse ︎](https://openverse.org/)
    - [WordPress.tv ︎](https://wordpress.tv/)
 *  - [About WordPress](https://wordpress.org/about/)
    - [Make WordPress](https://make.wordpress.org/)
    - [Events](https://events.wordpress.org/)
    - [Five for the Future](https://wordpress.org/five-for-the-future/)
    - [Enterprise](https://wordpress.org/enterprise/)
    - [Gutenberg ︎](https://wordpress.org/gutenberg/)
    - [Job Board ︎](https://jobs.wordpress.net/)
 * [Swag ︎](https://mercantile.wordpress.org/)
 * [Get WordPress](https://wordpress.org/download/)

Search in WordPress.org

 [ Get WordPress ](https://wordpress.org/download/)

[WordPress Developer Blog](https://developer.wordpress.org/news)

 * [Snippets](https://developer.wordpress.org/news/snippets/)
    - [Blocks](https://developer.wordpress.org/news/category/blocks/)
    - [Concepts](https://developer.wordpress.org/news/category/concepts/)
    - [Common APIs](https://developer.wordpress.org/news/category/common-apis/)
    - [Design](https://developer.wordpress.org/news/category/design/)
    - [Playground](https://developer.wordpress.org/news/category/playground/)
    - [Plugins](https://developer.wordpress.org/news/category/plugins/)
    - [Themes](https://developer.wordpress.org/news/category/themes/)
 *  - [About this site](https://developer.wordpress.org/news/about/)
    - [Updates](https://developer.wordpress.org/news/category/updates/)
    - [How to contribute](https://developer.wordpress.org/news/how-to-contribute/)
    - [Tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/)
 * [Subscribe](https://developer.wordpress.org/news/subscribe/)
 * [Developer Resources](https://developer.wordpress.org/)

 * [Snippets](https://developer.wordpress.org/news/snippets/)
    - [Blocks](https://developer.wordpress.org/news/category/blocks/)
    - [Concepts](https://developer.wordpress.org/news/category/concepts/)
    - [Common APIs](https://developer.wordpress.org/news/category/common-apis/)
    - [Design](https://developer.wordpress.org/news/category/design/)
    - [Playground](https://developer.wordpress.org/news/category/playground/)
    - [Plugins](https://developer.wordpress.org/news/category/plugins/)
    - [Themes](https://developer.wordpress.org/news/category/themes/)
 *  - [About this site](https://developer.wordpress.org/news/about/)
    - [Updates](https://developer.wordpress.org/news/category/updates/)
    - [How to contribute](https://developer.wordpress.org/news/how-to-contribute/)
    - [Tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/)
 * [Subscribe](https://developer.wordpress.org/news/subscribe/)
 * [Developer Resources](https://developer.wordpress.org/)

# 󠀁[A walk-through of layout classes in WordPress 6.1](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/)󠁿

By [Justin Tadlock](https://profiles.wordpress.org/greenshady/)

January 11, 2023

[Themes](https://developer.wordpress.org/news/category/themes/)

WordPress 6.1 introduced several necessary changes to its layout framework. Namely,
core has now centralized its layout definitions, created semantic class names, and
reduced code duplication on container blocks.

Originally, this post was intended to be a quick look at the changes to the system
for theme authors. However, given the heftiness of the topic, it has evolved into
a full overview of the layout framework.

The primary goals for this walk-through are to provide developers with an overall
view of the system and to know which classes are able to be targeted via CSS.

Table of contents

 * [An overview of layout-related classes](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#0-an-overview-of-layout-related-classes)
 * [Block gaps and vertical rhythm](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#1-block-gaps-and-vertical-rhythm)
 * [Constrained and flow layouts](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#2-constrained-and-flow-layouts)
 * [Flex layouts](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#3-flex-layouts)
 * [Content Justification](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#4-content-justification)
 * [Avoid .wp-container-* Classes](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#5-avoid-code-wp-container-code-classes)
 * [Future Layout Types](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#6-future-layout-types)
 * [Resources to learn more](https://developer.wordpress.org/news/2023/01/10/a-walk-through-of-layout-classes-in-wordpress-6-1/#7-resources-to-learn-more)

## An overview of layout-related classes

Layout-related classes are given to container-type blocks in WordPress. They define
how nested blocks are aligned within their parent.

Most extenders will immediately associate layout classes with the Group block and
its Row and Stack variations. However, WordPress uses the classes for other blocks,
such as Social Icons, Navigation, and Buttons. Layouts may also be used with third-
party blocks, even though support is currently marked as an experimental feature.

The following list is a bird’s-eye view of the currently-available classes in WordPress
6.1. Most of the class names should describe their roles, but don’t worry if you
don’t understand all of them yet. In this walk-through, you will learn what each
does.

 * **Layout Classes:**
    - `is-layout-constrained`
    - `is-layout-flow`
    - `is-layout-flex`
 * **Flex Orientation (Direction) Classes:**
    - `.is-vertical`
    - `.is-horizontal`
 * **Content Justification Classes:**
    - `.is-content-justification-left`
    - `.is-content-justification-center`
    - `.is-content-justification-right`
    - `.is-content-justification-space-between`
 * **Flex Wrap Classes:**
    - `.is-nowrap`
 * **Container Classes:**
    - `.wp-container-{id}`

## Block gaps and vertical rhythm

Before diving into each layout type, it’s important to understand how vertical spacing
between blocks works. Much of the system relies on this feature.

As any good designer will tell you, vertical rhythm is a crucial aspect of any design.
And vertical spacing between elements, while only one aspect of the rhythm, plays
a vital part in getting the design right.

In WordPress, this is the `blockGap` property. Do not let the name confuse you. 
While it maps to the CSS `gap` property in some layouts, it is also used to set `
margin-block-start` in others.

Any theme can set the default via `styles.spacing.blockGap` in their `theme.json`,
as shown in the following code snippet:

    ```wp-block-code
    {
        "$schema": "https://schemas.wp.org/trunk/theme.json",
        "version": 2,
        "styles": {
            "spacing": {
                "blockGap": "2rem"
            }
        }
    }
    ```

Themes can also target the `blockGap` property for blocks that support it. The following
code example shows how to set the default spacing while customizing it for the Group
block:

    ```wp-block-code
    {
        "$schema": "https://schemas.wp.org/trunk/theme.json",
        "version": 2,
        "styles": {
            "spacing": {
                "blockGap": "2rem"
            },
            "blocks": {
                "core/group": {
                    "spacing": {
                        "blockGap": "1rem"
                    }
                }
            }
        }
    }
    ```

There may be edge cases where you need to overrule the default via CSS. For those
scenarios, it’s typically best to change the value of the `--wp--style--block-gap`
CSS property rather than targeting a block’s `gap` or `margin`. You would do this
as shown in the following CSS code:

    ```wp-block-code
    .some-target-class {
        --wp--style--block-gap: 3rem;
    }
    ```

That may not always work. If a block (via `theme.json`) or user (via the interface)
has defined a specific value for `blockGap`, that value will be used instead of 
the CSS property. In those cases, you should not attempt to overwrite the choice
via CSS.

With an understanding of how the space between blocks is defined, you now have the
foundation for seeing how that operates within different layout types.

## Constrained and flow layouts

Both of these layout types are technically flow layouts. This is how browsers handle
the normal flow of a webpage without any intervention from CSS. WordPress defines
the spacing between blocks by applying the `blockGap` value to the `margin-block-
start` property of nested blocks (`margin-block-end` is zeroed out).

There is one key difference between the two layouts in WordPress:

 * Nested blocks within a **constrained** layout are limited by the theme’s content
   width by default (this can be overwritten with wide/full alignments).
 * Nested blocks within a **flow** layout fill up the width of their parent block.

As of WordPress 6.1, the constrained layout type is the default for the Group block.
Other blocks may define different defaults.

In the following screenshot, you can see a wide-aligned Group block with a Paragraph
and Image nested inside. However, these child blocks are “constrained” to the content
width by the **Inner blocks use content width** setting in the sidebar:

![WordPress post editor with a Group, Paragraph, and Image block in the content 
canvas.](https://gutenbergtimes.com/wp-content/uploads/2022/11/semantic-layouts-
flow.jpg)

If you toggle the switch for **Inner blocks use content width** to the off position,
the layout would become a “flow” layout.

WordPress handles all of this out of the box. Theme authors should primarily be 
aware of the classes associated with each layout, which are `.is-layout-constrained`
and `.is-layout-flow`. For the majority of use cases, there will never be a need
to use those. However, when you need to style blocks or elements specifically within
those layouts, target the specific layout class.

## Flex layouts

Flex layouts in WordPress work on the Flexbox system in CSS. In reality, it is a
limited subset of what is possible with Flexbox that fits within WordPress’ design
framework.

One major difference between flex and constrained/flow layout types is how they 
handle block spacing. Instead of applying the `blockGap` value to a block’s `margin-
block-start` property, the value is applied to the containing block’s `gap` property.
Flex layouts also have options between vertical and horizontal layouts.

Several container-type blocks have flex layouts by default, including:

 * Buttons
 * Social Icons
 * Navigation

Looking at the Group block example from earlier, you should see **Layout** variations
for creating a **Stack** and **Row** in the block inspector. Take a look at the 
Row variation, which has a horizontal layout:

![WordPress post editor with a text column aligned next to an image.](https://gutenbergtimes.
com/wp-content/uploads/2022/11/semantic-layouts-flex.jpg)

If the Stack variation had been chosen, the blocks would have been aligned vertically.

With the addition of vertical and horizontal options, there are a few layout-specific
classes that theme authors can target when necessary:

 * `.is-layout-flex`: Whether the layout has the flex type.
 * `.is-vertical`: Whether the layout has a vertical orientation.
 * `.is-horizontal`: Whether the layout has a horizontal orientation.

Those last two map to the `flex-direction` CSS property. Horizontal layouts are 
given the `row` value and vertical layouts the `column` value.

**Note:** The the default orientation for a block may not exist as a class in the
block’s HTML, so you would need to target the layout class directly in that case.

Flex layouts also have another option to disallow nested blocks from wrapping to
a new line as they grow. This is tied to the `flex-wrap` CSS property. The default
value is for blocks to wrap, which is noticeable as you add multiple blocks to a
horizontal layout. However, this can be disabled via the editor. In those cases,
WordPress applies the `.is-nowrap` class to the element.

## Content Justification

In WordPress 6.1, the constrained and flex layout types both have content justification
classes. These handle how the nested elements are aligned within their parent block.

Looking at the same example Group block from earlier, the following screenshot has
a constrained layout with the content justified right:

![WordPress post editor with a Group block and nested Paragraph and Image blocks
aligned to the right.](https://gutenbergtimes.com/wp-content/uploads/2022/11/semantic-
layouts-constrained-right.jpg)

There are four different content justification options for container blocks, each
with their own CSS class:

 * `.is-content-justification-left`: Nested blocks are aligned left.
 * `.is-content-justification-center`: Nested blocks are aligned center-aligned.
 * `.is-content-justification-right`: Nested blocks are aligned right.
 * `.is-content-justification-space-between`: Nested blocks are allowed to spread
   evenly with equal space between each. _For flex layouts only._

## Avoid .wp-container-* Classes

Some blocks may have a `.wp-container-*` class attached to them. In the past, there
have been instances when it was necessary to target those classes to address some
shortcoming of the layout system. However, this should be avoided altogether. There
is no way to know whether the classes will exist in the future or whether their 
behavior will change.

Always opt for one of the specific classes outlined earlier. They are the standard
going forward.

## Future Layout Types

CSS allows for all types of layouts, so it should be interesting to see what the
future of the block editor brings—_perhaps even a grid layout type_. The goal is
not necessarily to cover every potential use case. Rather, it is to offer a solid
foundation that can be iterated upon as the web continues to change.

The layout system in WordPress is still marked as an “experimental” block feature,
which means it is under active development. However, WordPress 6.1 has brought us
one step closer to a well-rounded and standard framework for how current and future
layouts will work.

## Resources to learn more

 * [Updated editor layout support in 6.1 after refactor](https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/)(
   Dev Note WordPress 6.1 release)
 * [Layout Styles](https://github.com/WordPress/gutenberg/pull/45055#issuecomment-1303815045)
   explanations in the handbook
 * [BlockGap in theme.json](https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#spacing)
 * [Spacing (incl BlockGap in block.json) ](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing)

Props to [@bph](https://profiles.wordpress.org/bph/) and [@daisyo](https://profiles.wordpress.org/daisyo/)
for feedback and review.

**Categories:** [Themes](https://developer.wordpress.org/news/category/themes/)

**Tags:** [Block themes](https://developer.wordpress.org/news/tag/block-themes/),
[Classic themes](https://developer.wordpress.org/news/tag/classic-themes/), [Extenders](https://developer.wordpress.org/news/tag/extenders/)

## 4 responses to “A walk-through of layout classes in WordPress 6.1”

 1.  ![Jessica Avatar](https://secure.gravatar.com/avatar/d9430ac4cbfa112d20ba5e18c20e90143e4198c3a44031ea0e1be8da93900d20?
     s=40&d=identicon&r=g)
 2.  Jessica
 3.  [September 12, 2023](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/#comment-1623)
 4.  What about responsiveness? Flex-wrap isn’t always a sufficient option.
 5.  [Reply](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/?replytocom=1623#respond)
 6.   a. ![Justin Tadlock Avatar](https://secure.gravatar.com/avatar/8013a62d7397c006bae48b96d6832a573ea71a7d5d3597fe584210567b508c05?
         s=40&d=identicon&r=g)
      b. [Justin Tadlock](https://profiles.wordpress.org/greenshady/)
      c. [September 12, 2023](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/#comment-1624)
      d. Can you provide more details on what you want to do? The question isn’t specific
         enough to accurately reply.
      e. [Reply](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/?replytocom=1624#respond)
 7.  ![Matt Pettefer Avatar](https://secure.gravatar.com/avatar/0bf3b2fe21a50f62a791f41a8b18612f6ea10c7349240920fb15535c19a7736a?
     s=40&d=identicon&r=g)
 8.  Matt Pettefer
 9.  [January 16, 2024](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/#comment-2858)
 10. Gutenberg is erasing all margins between paragraphs in a core/group no matter 
     how many places I set blockGap in theme.json. And no matter what the settings 
     are for the blocks.
 11. [Reply](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/?replytocom=2858#respond)
 12. ![Matt Pettefer Avatar](https://secure.gravatar.com/avatar/0bf3b2fe21a50f62a791f41a8b18612f6ea10c7349240920fb15535c19a7736a?
     s=40&d=identicon&r=g)
 13. Matt Pettefer
 14. [January 16, 2024](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/#comment-2859)
 15. Revised: it works fine with only paragraphs but if the group contains another 
     group containing the header it breaks all the blockGaps.
 16. [Reply](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/?replytocom=2859#respond)

### Leave a Reply 󠀁[Cancel reply](https://developer.wordpress.org/news/2023/01/a-walk-through-of-layout-classes-in-wordpress-6-1/?utm_source=wp-digest.com&output_format=md#respond)󠁿

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

 Save my name, email, and website in this browser for the next time I comment.

 Notify me of follow-up comments by email.

 Notify me of new posts by email.

Δ

## Have an idea for a new post?

### 󠀁[Learn how to contribute](https://developer.wordpress.org/news/how-to-contribute/)󠁿

Share your knowledge with fellow WordPress developers.

Search

### 󠀁[Review tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/)󠁿

Everything you need to know about writing for the Blog.

## Subscribe to the Blog

  Email Address

 Join 1,772 other subscribers

 * [About](https://wordpress.org/about/)
 * [News](https://wordpress.org/news/)
 * [Hosting](https://wordpress.org/hosting/)
 * [Privacy](https://wordpress.org/about/privacy/)

 * [Showcase](https://wordpress.org/showcase/)
 * [Themes](https://wordpress.org/themes/)
 * [Plugins](https://wordpress.org/plugins/)
 * [Patterns](https://wordpress.org/patterns/)

 * [Learn](https://learn.wordpress.org/)
 * [Documentation](https://wordpress.org/documentation/)
 * [Developers](https://developer.wordpress.org/)
 * [WordPress.tv ](https://wordpress.tv/)

 * [Get Involved](https://make.wordpress.org/)
 * [Events](https://events.wordpress.org/)
 * [Donate ](https://wordpressfoundation.org/donate/)
 * [Swag ](https://mercantile.wordpress.org/)

 * [WordPress.com ](https://wordpress.com/?ref=wporg-footer)
 * [Matt ](https://ma.tt/)
 * [bbPress ](https://bbpress.org/)
 * [BuddyPress ](https://buddypress.org/)

 The WordPress® trademark is the intellectual property of the WordPress Foundation.

 * [Visit our X (formerly Twitter) account](https://www.x.com/WordPress)
 * [Visit our Bluesky account](https://bsky.app/profile/wordpress.org)
 * [Visit our Mastodon account](https://mastodon.world/@WordPress)
 * [Visit our Threads account](https://www.threads.net/@wordpress)
 * [Visit our Facebook page](https://www.facebook.com/WordPress/)
 * [Visit our Instagram account](https://www.instagram.com/wordpress/)
 * [Visit our LinkedIn account](https://www.linkedin.com/company/wordpress)
 * [Visit our TikTok account](https://www.tiktok.com/@wordpress)
 * [Visit our YouTube channel](https://www.youtube.com/wordpress)
 * [Visit our Tumblr account](https://wordpress.tumblr.com/)