Size
The Size system provides utility classes for controlling width and height dimensions. It includes both fixed sizes and responsive utilities to handle various layout needs.
Setting Width and Height
Control element dimensions using fixed sizes from the design scale, arbitrary pixel values, or dynamic sizes that adapt to their container.
Fixed Sizes
Use predefined size classes from the design scale. Apply w--{size} for width and h--{size} for height with these size values:
w/h--0
w/h--0.5
w/h--1
w/h--1.5
w/h--2
w/h--2.5
w/h--3
w/h--3.5
w/h--4
w/h--5
w/h--6
w/h--7
w/h--8
w/h--9
w/h--10
w/h--11
w/h--12
w/h--14
w/h--16
w/h--20
w/h--24
w/h--28
w/h--32
w/h--36
w/h--40
w/h--44
w/h--48
w/h--52
w/h--56
w/h--60
w/h--64
w/h--72
w/h--80
w/h--96
0px
2px
4px
6px
8px
10px
12px
14px
16px
20px
24px
28px
32px
36px
40px
44px
48px
56px
64px
80px
96px
112px
128px
144px
160px
176px
192px
208px
224px
240px
256px
288px
320px
384px
Arbitrary Sizes
Need a specific dimension? Use arbitrary size classes for precise pixel values with w--[Npx] and h--[Npx] syntax, where N can be any value from 0 to 800.
w/h--[150px]
w/h--[225px]
w/h--[300px]
150px
225px
300px
Dynamic Sizes
Use dynamic sizes to set dimensions relative to the container or content. w--full and h--full set dimensions to 100% of the container, while w--auto and h--auto let the browser calculate dimensions based on content.
Size
Dynamic Widths
<div class="w--full">Full width</div>
<div class="w--auto">Auto width</div>
<div class="h--full">Full height</div>
<div class="h--auto">Auto height</div>Container Query Sizes
Container query sizes let you size elements as a percentage of the .layout container. Use w--[Ncqw] for width and h--[Ncqh] for height, where N is 0-100 (representing 0-100% of the layout's dimensions).
This works automatically because .layout is configured as a CSS container query context. Any element inside a layout can use these units to size itself relative to the layout's width or height—useful for responsive images, flexible columns, or proportional spacing.
For advanced cases where you need to reference a different container (e.g., a specific column), add style="container-type: size;" to that element. It must have explicit dimensions set.
w--[50cqw]
w--[75cqw]
h--[50cqh]
50% container width
75% container width
50% container height
<div class="view view--full">
<div class="layout">
<div class="w--[50cqw]">50% of layout width</div>
<div class="h--[33cqh]">33% of layout height</div>
</div>
</div>Min/Max Dimensions
Control minimum and maximum element dimensions independently using min and max classes. These constraints work with all sizing methods—fixed sizes, arbitrary sizes, container query units, and dynamic sizes.
Fixed Sizes
Use w--min-{size}, w--max-{size}, h--min-{size}, and h--max-{size} to constrain dimensions using fixed size values.
Size
Fixed Sizes
<div class="w--auto w--min-72">Min Width 72 (288px)</div>
<div class="w--full w--max-32">Max Width 32 (128px)</div>
<div class="h--min-72">Min Height 72 (288px)</div>
<div class="h--max-8">Max Height 8 (32px)</div>Arbitrary Sizes
Use w--min-[Npx], w--max-[Npx], h--min-[Npx], and h--max-[Npx] to constrain dimensions using precise pixel values.
w--min-[100px]
w--max-[200px]
h--min-[50px]
h--max-[150px]
min-width: 100px
max-width: 200px
min-height: 50px
max-height: 150px
Dynamic Sizes
Use w--min-full, w--max-full, h--min-full, h--max-full, w--min-auto, w--max-auto, h--min-auto, and h--max-auto to constrain dynamic dimensions.
w--min-full
w--max-full
h--min-auto
h--max-auto
min-width: 100%
max-width: 100%
min-height: auto
max-height: none
Container Query Sizes
Use w--min-[Ncqw], w--max-[Ncqw], h--min-[Ncqh], and h--max-[Ncqh] to constrain dimensions relative to the container.
w--min-[100cqw]
w--max-[50cqw]
h--min-[75cqh]
h--max-[90cqh]
min-width: 100cqw
max-width: 50cqw
min-height: 75cqh
max-height: 90cqh
Responsive Sizes
Size utilities support responsive variants, allowing you to set different dimensions at different screen breakpoints. Use the pattern breakpoint:size-class to apply sizes conditionally.
Responsive Examples
Apply different width and height values at different screen sizes using responsive prefixes. The framework follows a mobile-first approach where styles apply to the target breakpoint and larger.
Size
Responsive Sizes
<!-- Width: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="w--8 md:w--16 lg:w--24">Responsive Width</div>
<!-- Height: 8 (32px) by default, 16 (64px) on md and up, 24 (96px) on lg and up -->
<div class="h--8 md:h--16 lg:h--24">Responsive Height</div>
<!-- Min/Max with responsive -->
<div class="w--min-8 md:w--min-16 lg:w--min-24">Responsive Min Width</div>
<!-- Container query units with responsive -->
<div class="w--[25cqw] md:w--[50cqw] lg:w--[75cqw]">Responsive Container Query</div>Supported Responsive Classes
Responsive variants are available for most size utilities. Use prefixes like md:, portrait:, and md:portrait: to target different breakpoints and orientations.
| Category | Responsive Support | Example Usage |
|---|---|---|
| Fixed Sizes | ✓ Supported |
md:w--16, lg:h--24
|
| Full/Auto Dimensions | ✓ Supported |
md:w--full, lg:h--auto
|
| Min/Max Dimensions | ✓ Supported |
md:w--min-16, lg:h--max-full
|
| Arbitrary Dimensions | ✗ Not Supported |
md:w--[150px], lg:w--[225px]
|
| Container Query Sizes | ✓ Supported |
md:w--[50cqw], lg:h--[75cqh]
|