# 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

1. In the editor, open the inserter and search for **Container**, or the keyword `section`. [Add a block](https://lovelyrender.com/documentation/add-block/) details the ways to insert a block.
2. Choose one of the three layouts offered: **Container**, **Flex** or **Grid**.
3. Click inside the container and insert the blocks it must group. It accepts all blocks.

| 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.

| 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.

**Warning:** A container that carries a link is published as a link, whatever tag is chosen. To keep the `article` tag of a clickable card, put the link on a container placed inside the `article`.

## 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.

| 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.](https://static.lovelyrender.com/uploads/2026/10/1028-doc-blocs-flex.png)

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.

| 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.](https://static.lovelyrender.com/uploads/2026/10/180-blocs-conteneur.png)

| 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.

**Tip:** A row of cards can blend into its section’s grid on a phone, between the heading and the button. Dissolve the row on **Mobile**, then give each card its order from the section’s panel.

## 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

1. 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.
2. Type at least two characters to search for a page, a post, a composition or a media library file.
3. 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.

| 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

| 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 |

| 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](https://lovelyrender.com/documentation/open-modal-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.

**Warning:** A link cannot contain another one. A clickable card must not hold a linked button, a linked heading or a link in a text. Choose between linking the whole card and linking only its button.

**Note:** A container can be linked to a draft, a content item in the trash or a password-protected page. It displays, but the click leads nowhere. The link works as soon as the target is published.

## 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.

| Panel | Guide |
| --- | --- |
| **Size & Spacing** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) and [Space your blocks](https://lovelyrender.com/documentation/space-blocks/) |
| **Background images** | [Set a background](https://lovelyrender.com/documentation/set-background/) |
| **Colors** | [Color a block](https://lovelyrender.com/documentation/color-block/) |
| **Typography** | [Format a text](https://lovelyrender.com/documentation/format-text/). The setting applies to the container’s texts that do not have their own. |
| **Borders**, **Effects**, **Transitions** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-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](https://lovelyrender.com/documentation/animate-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](https://lovelyrender.com/documentation/check-accessibility/) 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.

## See also

- [Simple block](https://lovelyrender.com/documentation/simple-block/)
- [Space out your blocks](https://lovelyrender.com/documentation/space-blocks/)
- [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/)
- [Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)