Width & Height
Category: BasicUsers can independently control width and height using _w-* and _h-* style classes. Dimensions use input height as the base unit (e.g., _w-1 equals 40px, _w-6 equals 40*6px). Includes three special si...
Introduction
In web pages, some elements have undefined widths that need to be manually set, including:
- Inline elements (
display:inline/inline-flex/inline-block) whose width depends on content - Elements in flex layouts that become inline due to nesting
- Absolutely positioned elements (
position:fixed/absolute) that lose their default 100% width - Block elements in multi-column layouts that need to leave space for others
Width Styles
The framework provides a width system using box-sizing:border-box with two approaches:
- Absolute widths based on form field height (4rem/40px)
- Relative percentage widths
Detailed specifications:
| Class Name | Description |
|---|---|
| _w-0 | 0px width |
| _w-1 | 4rem (40px) width |
| _w-2 | 4rem × 2 (80px) |
| _w-3 | 4rem × 3 (120px) |
| _w-4 | 4rem × 4 (160px) |
| _w-5 | 4rem × 5 (200px) |
| _w-6 | 4rem × 6 (240px) |
| _w-7 | 4rem × 7 (280px) |
| _w-8 | 4rem × 8 (320px) |
| _w-9 | 4rem × 9 (360px) |
| _w-10 | 4rem × 10 (400px) |
| _w-neat | Matches input field width (4rem × 10) |
| _w-half/_w-1of2 | 50% width |
| _w-1of3 | 33.3% width |
| _w-2of3 | 66.7% width |
| _w-1of4 | 25% width |
| _w-3of4 | 75% width |
| _w-full | 100% width |
| _w-auto | Auto width |
| _w-iso | aspect-ratio =1/1 |
- Output
- HTML
Height Styles
Following the same design principles as width, the height classes are:
| Class Name | Description |
|---|---|
| _h-0 | 0px height |
| _h-1 | 4rem (40px) height |
| _h-2 | 4rem × 2 (80px) |
| _h-3 | 4rem × 3 (120px) |
| _h-4 | 4rem × 4 (160px) |
| _h-5 | 4rem × 5 (200px) |
| _h-6 | 4rem × 6 (240px) |
| _h-7 | 4rem × 7 (280px) |
| _h-8 | 4rem × 8 (320px) |
| _h-9 | 4rem × 9 (360px) |
| _h-10 | 4rem × 10 (400px) |
| _h-neat | Matches input field height (4rem) |
| _h-half/_h-1of2 | 50% height |
| _h-1of3 | 33.3% height |
| _h-2of3 | 66.7% height |
| _h-1of4 | 25% height |
| _h-3of4 | 75% height |
| _h-full | 100% height |
| _h-auto | Auto height |
| _h-iso | aspect-ratio =1/1 |
- Output
- HTML