inline-size

Utilities for setting the inline size of an element.

Examples

Basic example

Use inline-<number> utilities like inline-24 and inline-64 to set an element to a fixed inline size based on the spacing scale:

Using a percentage

Use inline-full or inline-<fraction> utilities like inline-1/2 and inline-2/5 to give an element a percentage-based inline size:

Using the container scale

Use utilities like inline-sm and inline-xl to set an element to a fixed inline size based on the container scale:

Matching the viewport

Use the inline-screen utility to make an element span the entire inline size of the viewport:

<!-- [!code classes:inline-screen] -->
<div class="inline-screen">
  <!-- ... -->
</div>

Resetting the inline size

Use the inline-auto utility to remove an element's assigned inline size under a specific condition, like at a particular breakpoint:

<!-- [!code classes:inline-full,inline-auto] -->
<div class="inline-full md:inline-auto">
  <!-- ... -->
</div>

Using a custom value

Responsive design

Customizing your theme