Skip to main content

​
Overview

Control the display type, overflow behavior, object fitting, and aspect ratios of elements using our layout utilities. These utilities form the foundation of your page structure and work seamlessly with Elementor v4’s Atomic Elements.

Display

Control how elements are displayed with .block, .flex, .hidden, and more

Overflow

Control content overflow with .overflow-hidden and .overflow-auto

Object Fit

Control how images fit containers with .object-cover and .object-contain

Aspect Ratio

Maintain consistent proportions with .aspect-square and .aspect-video

Flexbox

Complete flexbox utilities for direction, alignment, and spacing

​
Quick Start

​
Basic Layout

<!-- Display utilities -->
<div class="flex items-center gap-4">
  <div class="block p-4 bg-blue text-white">Block</div>
  <div class="inline-block p-2 bg-green text-white">Inline Block</div>
</div>

<!-- Overflow -->
<div class="w-64 h-32 overflow-auto border border-gray">
  <p class="p-4">Scrollable content</p>
</div>

<!-- Object fit -->
<img src="image.jpg" class="w-64 h-32 object-cover rounded" alt="Cover image">

<!-- Aspect ratio -->
<div class="w-full aspect-video bg-gray-light rounded"></div>

​
Layout Utilities Reference

​
Display Utilities

  • Block: .block, .inline-block
  • Flex: .flex, .inline-flex
  • Hidden: .hidden

​
Overflow Utilities

  • Hidden: .overflow-hidden
  • Auto: .overflow-auto

​
Object Fit Utilities

  • Cover: .object-cover
  • Contain: .object-contain

​
Aspect Ratio Utilities

  • Square: .aspect-square (1:1)
  • Video: .aspect-video (16:9)
For comprehensive flexbox utilities including direction, wrap, justify, align, and gap, see the Flexbox documentation.

Spacing

Margin and padding for layout spacing

Sizing

Width and height utilities for layout

Positioning

Position utilities for advanced layouts

Components

Pre-built layout components