Container

The Container block groups other blocks and decides how they are arranged: stacked, side by side or in a grid. This page describes its three layouts, its tags, its layout settings by screen and its link, which makes its whole surface clickable.

Add a container

In the editor, open the inserter and search for Container, or the keyword section. Add a block details the ways to insert a block.
Choose one of the three layouts offered: Container, Flex or Grid.
Click inside the container and insert the blocks it must group. It accepts all blocks.

The three layouts of the container
Layout	Arrangement of the blocks	Common use
Container	The blocks stack one under the other. This is the default layout.	A page section or a box.
Flex	The blocks sit side by side or in a column and adapt to the screen width.	A row of buttons, a row of cards or a header.
Grid	The blocks are arranged in aligned rows and columns.	A gallery, a catalog or a regular grid of cards.

You change layout at any time with the Block, Flex and Grid buttons of the block toolbar. The first row of buttons at the top of the inspector does the same. The container’s content and style are kept.

Choose the HTML tag

Under the row of layouts, the HTML tag row sets the container’s role in the page for browsers and screen readers. It stays visible whichever tab is open. Each tag has a tooltip that recalls its use.

The ten tags of the container
Tag	Role	Example
`div` (default)	A generic container, with no semantic value.	An ordinary layout block.
`header`	The opening content or the navigation links of a section.	The site header or that of a post.
`main`	The dominant content of the document, once per page.	The area that holds the page content.
`nav`	A block of navigation links.	The main menu or the footer menu.
`section`	A standalone thematic section.	A page chapter with its own heading.
`article`	A standalone piece of content that would make sense published alone.	A news card or a testimonial.
`aside`	Content that is only indirectly related to what surrounds it.	A side column or a box.
`footer`	The closing content of the section that contains it.	The site footer.
`ul`	A list: each block inside is read as an item.	A row of service cards or logos.
`ol`	A numbered list, for items whose order matters.	The steps of a process.

With ul or ol, a screen reader announces the number of items and lets you move from one to the next. Nothing changes on screen: the grid, the order and the animations of the blocks stay as you set them.

For nav, section and aside, the Region name field appears under the row. Screen readers read it to tell this region from the others, for example “Main menu” and “Footer menu”. Fill it in as soon as a page has two regions of the same kind.

Set the flex layout

In the Flex layout, the Flex layout panel opens at the top of the Settings tab. Its tabs with icons set the layout for all screens (Overall), then screen by screen (Desktop, Tablet, Mobile). The devices icon next to a label turns that setting into a per-screen setting.

The settings of the Flex layout panel
Setting	Effect	Default value
Orientation	Horizontal: the blocks are laid out in a row. Vertical: they are laid out in a column.	Horizontal
Wrap	Blocks that do not fit on one line move to the next line.	Off
Reverse	The blocks display in reverse order.	Off
Gap	The space between blocks, in columns and in rows, taken from the site’s spacing scale.	The saved style’s, otherwise none
Align items	The position of the blocks on the cross axis: start, center, end or baseline.	No alignment imposed
Justify content	The distribution of the blocks on the main axis: grouped at the start, the center or the end, or spaced in three ways.	No distribution imposed
Align content	The distribution of the rows when the blocks wrap. Shown only if Wrap is on.	Default

The Flex layout panel of a row of two buttons: the All, Desktop, Tablet and Mobile tabs, the Horizontal orientation, wrap on, the gap at 8 px in columns and rows, then Align items, Justify content and Align content.

A wrap or a reverse set in the Overall tab applies to all screens. In a screen’s tab, the box then stays checked and grayed out, with the note Set for all screens in the All tab.

Set the grid layout

In the Grid layout, the Grid layout panel starts with five Presets. One click sets the columns of the three screens at once.

The grid presets
Preset	Desktop	Tablet	Mobile
4 / 2 / 1	4 columns	2 columns	1 column
2 / 2 / 1	2 columns	2 columns	1 column
3 / 1 / 1	3 columns	1 column	1 column
1/3, 2/3	2 columns, the second twice as wide	1 column	1 column
2/3, 1/3	2 columns, the first twice as wide	1 column	1 column

The top of the inspector of a Grid container: the three layouts, the HTML tag row, then the Grid layout panel with its five presets, the screen tabs and the Grid mode set to Template.

The settings of the Grid layout panel
Setting	Effect	Default value
Grid mode (Overall tab)	Template: you set the number of columns. Auto: the grid creates its columns or rows as blocks come in.	Template
Columns	The number of columns on this screen, from 1 to 24. In Template mode.	1
Auto flow	The fill direction: Row, Row dense, Column or Column dense. A dense mode fills the holes left by larger blocks.	Row
Column sizes	The width of each column, as a fraction of the remaining space (`fr`), in pixels, in screen width (`dvw`) or automatic. Shown from two columns.	`1fr` for each column
Subgrid	The child blocks share the container’s rows, to align their headings and buttons from one card to the next. The Rows field says how many, from 1 to 12.	Off
Advanced mode	Each child block is placed on the grid by its start and end lines. Show rows adds the placement in rows.	Off
Auto columns, Auto rows	The size of the columns or rows the grid creates on its own. In Auto mode.	`max-content` for columns
Gap, Align items, Justify content, Align content	The same settings as in flex.	As in flex

Under these settings, a preview draws the grid of the chosen screen. The Children section lists the container’s blocks. For each, you set its width in columns, its height in rows, its Order, Align self and Justify self. In advanced mode, Col start, Col end, Row start and Row end place it precisely.

Dissolve the container on a screen

In flex or grid, each screen’s tab starts with the Dissolve on this screen switch. When on, the container loses its box on that screen. Its blocks join the grid or row of the block above and sit there as its children.

The container’s background, borders, spacing and size have nothing left to apply to on that screen. A reminder appears in the Styles tab when you preview that screen. The other screens do not change.

Make the container clickable

The Link panel of the Settings tab makes the whole container a link: the image, the heading, the text and the inner margins. This is how to build a fully clickable card. The same panel exists on the Button, the Heading, the Simple block, the Media, the Navigation link and the list card.

Choose the target

In the Link panel, click in the Search or paste a URL… field. The list first offers the pages the site finds on its own.
Type at least two characters to search for a page, a post, a composition or a media library file.
For another destination, type its address, then click the suggestion marked Address at the bottom of the list. Pasting the address is not enough.

The chosen target appears as a chip, with its title and type. The Edit and Remove link buttons clear the target: the first to choose another, the second to have no link anymore.

The targets of the Link panel
Label	Target
Card	Link to the item: the content item each card of a list or references shows. Offered first, in a card only.
Template	Home page, in the language of the page being read. Archive: followed by the name of a content type, for the page that lists its content items.
Page, Article, Composition	A content item of the site. A content item of another type carries the name of its type.
Image, PDF, Video, Audio, File	A media library file.
Address	A typed address: `https://` for another site, `mailto:` to write, `tel:` to call, `#anchor` to scroll to a block of the page. An address starting with `http://` is not offered.

A link to a content item of the site is kept by the content item’s identity. If you rename the page or change its address, the link follows.

Set the link

The settings of the Link panel
Setting	Effect	Default value
Hide the link from search engines	The published page no longer contains the address in clear. The container stays clickable with the mouse and the keyboard. Nofollow and Open in a new tab are then unchecked and grayed out.	Off
Link opening	How the target displays, among six values. Absent for a `mailto:`, a `tel:`, an anchor, the home page, an archive and Link to the item.	Classic (in the browser tab)
Accessible name	The name screen readers announce in place of the link’s content.	Empty
Nofollow	Asks search engines not to follow the link or pass ranking value to it.	Off
Open in a new tab	Opens the target in a new tab. Active only with the classic opening. Absent for a `mailto:`, a `tel:` or an anchor.	Off

The Link opening values
Value	Display of the target
In a modal	A centered window, over the page.
Modal at the bottom left, Modal at the bottom center, Modal at the bottom right	A window anchored at the bottom of the screen.
On the right side	A panel that slides in from the right.
Classic (in the browser tab)	The target page replaces the current page.

The five overlay openings load the target without reloading the page. Open a modal or a side panel explains how to style them.

A composition or a media library file always opens as an overlay: Classic leaves the list and switches to In a modal. The link is then hidden from search engines and marked Nofollow. The boxes concerned are grayed out.

Add an HTML anchor

The Advanced panel, collapsed at the bottom of the Settings tab, holds the HTML anchor field. Write an identifier in it, for example pricing: an address ending in #pricing takes the visitor to this container. Spaces become hyphens and the # is removed.

The anchor lets another block designate the container from its Interactions section, in the Animations tab.

Styles tab

The container is set in the Default, Hover and Active states. Active styles the container when another block activates it. It receives the saved styles: Card, Section and Spaced come with the product.

The panels of the container’s Styles tab
Panel	Guide
Size & Spacing	Set size, borders and effects and Space your blocks
Background images	Set a background
Colors	Color a block
Typography	Format a text. The setting applies to the container’s texts that do not have their own.
Borders, Effects, Transitions	Set size, borders and effects

A clickable container benefits from changing on hover, with a shadow or a slight enlargement: this is how the card signals that it is clickable.

Animations tab

The Animations tab makes the container appear or move with all its content. Its Interactions section activates other blocks. Animate a block describes the effects and triggers.

On a phone

The flex and grid settings are made screen by screen. A four-column grid on a computer can become one column on a phone.
Without Wrap, the blocks of a horizontal flex row stay on a single line, whatever the screen width.
Dissolve on this screen removes the container’s box on a single screen.

Accessibility

A page needs a main region, only one. The editor’s Accessibility panel flags a page without main or with several. It flags several navigation regions when one has no name.
A clickable container receives focus with the Tab key and is activated with Enter. Hidden from search engines, it is also activated with Space.
Leave Accessible name empty when the card carries visible text: this name would replace the heading and summary for a screen reader. Fill it in for a link that only shows an image or an icon.
When Open in a new tab is checked, screen readers announce “opens in a new tab” after the link’s name. Nothing changes on screen.

Check the accessibility of your pages describes the Accessibility panel.

Limits

The chosen tag is replaced by a link as soon as the container carries a link.
Hiding a link from search engines does not protect it: the address stays in the page, encoded. A confidential page is protected by its status or a password.
A Container layout has no layout panel and no Dissolve on this screen switch.