Skip to main content
Layout overview cover

​
Overview

Layout utilities control how blocks display, clip, position, layer, and frame media.

Display

Block, inline-block, flex, inline-flex, and hidden helpers

Overflow

Clip or scroll overflowing content with the bundled overflow helpers

Positioning

Static, relative, absolute, fixed, and sticky layout placement

Object Fit

Tailwind-style object-fit utilities for images and video in fixed frames

Aspect Ratio

Square, video, and auto aspect utilities

Z-Index

Layering helpers for stacked interfaces and overlays

​
Quick Start

<section class="cont my-12">
  <div class="card">
    <div class="flex items-center justify-between gap-4 mb-6">
      <h2 class="text-2xl font-bold text-black">
        Layout Baseline
      </h2>
      <p class="text-sm text-gray">
        Display, spacing, and alignment
      </p>
    </div>
    <div class="aspect-video overflow-hidden rounded-lg bg-gray-light mb-4">
    </div>
    <div class="flex gap-4">
      <div class="w-1-2 p-4 bg-primary text-white rounded">
        Column A
      </div>
      <div class="w-1-2 p-4 bg-gray-light rounded">
        Column B
      </div>
    </div>
  </div>
</section>

​
What Ships Here

  • Display: .block, .inline-block, .flex, .inline-flex, .hidden
  • Overflow: .overflow-hidden, .overflow-auto, .overflow-visible
  • Positioning: .static, .relative, .absolute, .fixed, .sticky
  • Object fit: .object-contain, .object-cover, .object-fill, .object-none, .object-scale-down
  • Aspect ratio: .aspect-square, .aspect-video, .aspect-auto
  • Z-index: .z-0 through .z-100 in steps of 10

Spacing

Margin and padding for layout spacing

Sizing

Width and height utilities for layout

Positioning

Position utilities for advanced layouts

Breakpoints

Learn when and where to use the bundled --on-* suffixes