Configure the Flipbox Grid Layout

Use Layout Orientation and Number of Columns to arrange Post Flipbox or Story Flipbox cards in a responsive grid.

The Flipbox grid layout uses Layout Orientation in Post Flipbox and Story Flipbox with Vertical and Horizontal choices. The default is Vertical. A vertical layout uses the Number of Columns control, which is registered as responsive in the reviewed source.

Post Flipbox → Content → Layout Settings → Number of Columns

  • Open Elementor Editor.
  • Select the Post Flipbox widget.
  • Open the Content tab.
  • Expand Layout Settings.
  • Set Layout Orientation to Vertical.
  • Locate Number of Columns.
  • Set the desktop column count.
  • Switch the responsive control to Tablet.
  • Set the tablet column count.
  • Switch the responsive control to Mobile.
  • Set the mobile column count.
  • The source defaults are 3 desktop columns, 2 tablet columns, and 1 mobile column; the range is 1–6.
  • Click Update to save the page.

Story Flipbox → Content → Layout Settings → Number of Columns

  • Open Elementor Editor.
  • Select the Story Flipbox widget.
  • Open the Content tab.
  • Expand Layout Settings.
  • Set Layout Orientation to Vertical.
  • Locate Number of Columns.
  • Set the desktop column count.
  • Switch the responsive control to Tablet.
  • Set the tablet column count.
  • Switch the responsive control to Mobile.
  • Set the mobile column count.
  • Click Update to save the page.

Layout Orientation → Vertical for Grid Controls

  • Open Elementor Editor.
  • Select the Post Flipbox widget.
  • Open the Content tab.
  • Expand Layout Settings.
  • Locate Layout Orientation.
  • Set Layout Orientation to Vertical to expose Number of Columns.
  • If Layout Orientation is Horizontal, the grid’s Number of Columns control is hidden.
  • Use the carousel instructions if you need a horizontal layout.
  • Click Update to save the page.

Preview Desktop, Tablet & Mobile Grid and Click Update

  • Open Elementor Editor.
  • Select the Post Flipbox widget.
  • Preview the grid at Desktop width.
  • Preview the grid at Tablet width.
  • Preview the grid at Mobile width.
  • Check card widths.
  • Check text wrapping.
  • Check card spacing.
  • Click Update to save the page.

Configure a grid

  1. Select a Post Flipbox or Story Flipbox widget and open its Layout Settings in the Content tab.
  2. Set Layout Orientation to Vertical.
  3. Adjust Number of Columns. The source defines a desktop default of 3, tablet default of 2, and mobile default of 1; the allowed range is 1–6 in steps of 1.
  4. Set device-specific column values if the responsive controls are available in your editor.
  5. Preview the cards at each breakpoint and check that card widths, text, and spacing remain readable.

When to use horizontal layout

When Layout Orientation is set to Horizontal, the grid’s Number of Columns control is conditional and the carousel controls appear instead. For that layout, follow Configure the Flipbox Carousel Layout. The Basic Flipbox widget is a single-card widget and does not use this multi-card grid control.

Screenshot to add: the Layout Settings section showing Vertical selected and the Number of Columns control. This is a placeholder, not an existing screenshot.

Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.