Inline Container

Reading Time: 2 minutes Last Updated: October 26, 2025

The Inline Container Block lets you place blocks side-by-side instead of the default vertical stacking. Perfect for creating multi-column layouts where you want blocks to appear next to each other.

Overview#

Block Name: Inline Container
Category: RedFox Thank You
Purpose: Arrange blocks horizontally (inline/side-by-side) instead of vertically

What It Does#

The Inline Container allows you to:

  • Place blocks side-by-side (horizontally)
  • Create multi-column layouts
  • Control alignment and spacing between inline blocks
  • Build responsive designs that adapt to different screen sizes
  • Arrange content in rows instead of stacking vertically

Think of it as a container that breaks the default WordPress behavior of stacking blocks vertically. Instead, blocks inside this container can sit next to each other horizontally, like columns in a table row.

When to Use#

Use Inline Container For:

  • Multi-column information displays
  • Side-by-side block arrangements
  • Custom header/footer sections
  • Responsive grid layouts
  • Flexible content organization

Use Regular Blocks Instead For:

  • Simple single-column content
  • Standard blog-style layouts
  • When WordPress Columns block is sufficient

Adding the Block#

  1. Click + button in the editor
  2. Search for “Inline Container”
  3. Click to add the container
  4. Add other blocks inside the container (they’ll appear side-by-side)
  5. Adjust layout settings in the sidebar

Block Settings#

Layout Settings#

Configure how child blocks are arranged within the container.

Flex Direction – Controls how blocks are arranged:

  • Row (default) – Blocks appear side-by-side, left to right
  • Row Reverse – Blocks appear side-by-side, right to left
  • Column – Blocks stack top to bottom
  • Column Reverse – Blocks stack bottom to top

Flex Wrap – Controls whether blocks wrap to new lines:

  • No Wrap (default) – All blocks stay on one row
  • Wrap – Blocks wrap to next row if they don’t fit
  • Wrap Reverse – Blocks wrap in reverse order

Justify Content – Controls horizontal spacing:

  • Flex Start – Blocks align to the left
  • Flex End – Blocks align to the right
  • Center – Blocks centered
  • Space Between – Blocks spread with space between
  • Space Around – Equal space around each block
  • Space Evenly – Even spacing between and around

Align Items – Controls vertical alignment:

  • Stretch (default) – Blocks stretch to match height
  • Flex Start – Blocks align to top
  • Flex End – Blocks align to bottom
  • Center – Blocks centered vertically
  • Baseline – Text baselines align

Row Gap – Vertical space between rows

Column Gap – Horizontal space between blocks

Text#

Style text content within the container:

  • Text Color – Color for text content
  • Font Size – Size of text
  • Line Height – Spacing between lines of text

Background#

  • Background Color – Background color for the entire container

Spacing#

Control spacing around and inside the block:

  • Margin – Space outside the container
  • Padding – Space inside the container