Clamp
Center-constrained component, supporting both horizontal and vertical clamping. Individual children can "opt out" of the clamping with the <Breakout> component.
Props API
| Prop | Type | Default value |
|---|---|---|
clamp | string | [maxWidth: string | null, maxHeight: string] | — |
gap | Gap<string | number> | — |
asChild | boolean | — |
orientation | "row" | "column" | — |
bleed | string | number | — |
bleedTop | Padding<string | number> | — |
bleedRight | Padding<string | number> | — |
bleedBottom | Padding<string | number> | — |
bleedLeft | Padding<string | number> | — |
xAlign | JustifyContent | — |
yAlign | AlignItems | — |
import { Clamp, ClampProps, clampStyles } from '@christiankaindl/lyts'
Use Clamp when you want to center elements with a maximum width and/or height. Common use cases for this are articles and overlays.
Clamping vertically
Clamp can also constrain an elements height rather than only its width. To clamp vertically, pass an array to the clamp prop, where the first value is the maximum width and the second value is the maximum height.
For example, this overlay is clamped both horizontally (width) and vertically (height):
// Edit the live code below<Clamp clamp={['min(350px, 50vw)', '200px']} style={{ height: 400 }}><Box style={{ height: '100%' }} /></Clamp>
If the previous example were to be an overlay, the Clamp container could be positioned absolutely.
Multiple children
Clamp supports multiple children (not when vertical clamping is used). When using multiple children, Clamp can be used similar to a Stack, with consistent spacing between elements, provided via the gap prop:
Break-out elements
Clamp also supports "break-out" elements, as described in Josh Comeau's Full-Bleed Layout Using CSS Grid (check it out, it's a great read!). LYTS provides Breakout, which can be used as a direct child to Clamp to make it "opt out" of the clamping and become full-width: