Display settings

Adjust display properties to determine the fundamental layout behavior of an element.

This video features an old UI. Updated version coming soon!

The display settings, located in the Style panel, control the layout behavior of an element and the content around that element. Here, you can control how elements are displayed in relation to each other — whether they’re stacked on top of one another or laid out side by side.

In the Layout section of the style panel the display settings includes six display options. The six options are block, flexbox, grid, inline block, inline and display none.

In this article, we’ll cover each display setting in the Style panel:

  1. Block
  2. Flexbox
  3. Grid
  4. Inline block
  5. Inline
  6. Display: none

Block

Block is the default display setting for most elements. Each block element starts on a new line and takes up the full width of its parent element unless a custom width is set.

The block button in the display settings is highlighted.

Regardless of its width, each block element will push the next element onto a new line. To lay elements side by side, select a different layout setting, such as inline-block.

Flexbox

Elements with a flex layout arrange their direct children horizontally or vertically.

The flexbox button in the display settings is highlighted. The layout section in the style panel also includes settings for direction, align, justify and children when flexbox is selected.

You can customize how the direct children stack, when they wrap, how they are aligned and justified within the flex container.

The Align settings for the flexbox display layout is set to stretch. The five align settings are start, center, end, stretch and baseline.

When you create a flex container, all direct children of that parent element become flex children. You can add to and override the layout of flex children in the flex child settings.

Learn more about flex layouts.

Grid

Elements with a grid layout arrange their direct children across multiple columns and rows.

The Grid setting is selected and highlighted in the display settings section. The layout section of the style panel includes an align and distribute section when the Grid display settings is selected.

You can customize how the direct children are positioned, aligned, and distributed within the grid components: the container, the individual cells, group of cells, or tracks.

The edit grid settings panel includes input fields for the gap size of the columns and rows, direction options and sections to add columns and rows. There is also an Areas section with a plus icon to add a new one.

With grid layouts, you can specify gaps between columns and rows, referred to as tracks. You can also use the FR unit to create fully fluid grid layouts.

Grid child settings appear at the top of the Style panel when a child of a grid container is selected. These allow you to override the grid container settings for alignment and justification.

Learn more about grid.

Grid vs Flex

Flexbox and grid are both great layout options. Flexbox gives you layout controls in one dimension — either vertical or horizontal. Grid gives you layout controls that work in two-dimensions, which is great for magazine layouts, for example.

For more detail on each layout option, the differences between them, and when you may want to use one instead of the other, check out our video lesson on flexbox versus grid

Inline block

Inline-block elements are stacked side-by-side and their width is determined by the content inside.

The inline block button in the display settings is highlighted.

Inline-block elements will also wrap when the content hits the boundary of the parent element. In the Style panel, you can apply specific width, height, padding, and margin settings to inline-block elements.

Step one on the top, select the inline block display setting for the H1 element. Step two on the bottom, the four heading elements are all immediately next to each other.
Step three on the left, adjust the width on the size panel for the H1 headings. Step four on the right, the heading elements have wrapped to their own line within the same container. They are no longer immediately next to each other, now they have all moved down to their own line.
A common problem when using inline-block elements is that whitespace in HTML becomes visual space in the site design. Learn how to fix whitespace issues.

Inline

Inline is the default display setting for any text content inside an element. You can change the layout of an inline element by changing its margins and padding but you cannot change its width or height.

The inline button in the display settings is highlighted.

Display: none

To hide an element completely, set its display setting to none.

The none button in the display settings is highlighted.

Elements set to display none will not be rendered by the browser, which can be handy for altering how content displays on mobile devices.

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!