Max block size

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "max-block-size"; export const description = "Utilities for setting the maximum block size of an element.";

", "max-block-size: calc(var(--spacing) * \);"], ["max-block-\", "max-block-size: calc(\ * 100%);"], ["max-block-none", "max-block-size: none;"], ["max-block-px", "max-block-size: 1px;"], ["max-block-full", "max-block-size: 100%;"], ["max-block-screen", "max-block-size: 100vh;"], ["max-block-dvh", "max-block-size: 100dvh;"], ["max-block-dvw", "max-block-size: 100dvw;"], ["max-block-lvh", "max-block-size: 100lvh;"], ["max-block-lvw", "max-block-size: 100lvw;"], ["max-block-svh", "max-block-size: 100svh;"], ["max-block-svw", "max-block-size: 100svw;"], ["max-block-min", "max-block-size: min-content;"], ["max-block-max", "max-block-size: max-content;"], ["max-block-fit", "max-block-size: fit-content;"], ["max-block-lh", "max-block-size: 1lh;"], ["max-block-(\)", "max-block-size: var(\);"], ["max-block-[\]", "max-block-size: \;"], ]} />

Examples

Basic example

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

{

max-block-80

max-block-64

max-block-48

max-block-40

max-block-32

}

<!-- [!code classes:max-block-80,max-block-64,max-block-48,max-block-40,max-block-32,max-block-24] -->
<div class="block-96 ...">
  <div class="block-full max-block-80 ...">max-block-80</div>
  <div class="block-full max-block-64 ...">max-block-64</div>
  <div class="block-full max-block-48 ...">max-block-48</div>
  <div class="block-full max-block-40 ...">max-block-40</div>
  <div class="block-full max-block-32 ...">max-block-32</div>
</div>

Using a percentage

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

{

max-block-9/10

max-block-3/4

max-block-1/2

max-block-full

}

<!-- [!code classes:max-block-9/10,max-block-3/4,max-block-1/2,max-block-1/4,max-block-full] -->
<div class="block-96 ...">
  <div class="block-full max-block-9/10 ...">max-block-9/10</div>
  <div class="block-full max-block-3/4 ...">max-block-3/4</div>
  <div class="block-full max-block-1/2 ...">max-block-1/2</div>
  <div class="block-full max-block-full ...">max-block-full</div>
</div>

Using a custom value

Responsive design

Customizing your theme