# 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.

### Fixed Sizes

Control element widths and heights using predefined size classes. Use `w--{size}` and `h--{size}` class names 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 1000.

`w/h--[150px]`

`w/h--[225px]`

`w/h--[300px]`

`150px`

`225px`

`300px`

### Responsive Sizes

Responsive sizes allow you to set width and height values relative to the container or content, rather than using fixed pixel values.

#### Responsive Width

Use `w--full` for full width or `w--auto` for automatic width.

Full Width

Auto Width

SizeResponsive Widths

    <div class="w--full">Full width</div>
    <div class="w--auto">Auto width</div>

#### Responsive Height

Use `h--full` for full height or `h--auto` for automatic height.

Full Height

Auto Height

SizeResponsive Heights

    <div class="h--full">Full height</div>
    <div class="h--auto">Auto height</div>

Next

[Spacing Control element spacing with fixed margin and padding values](/framework/docs/1.2/spacing)