Sizing
Easily control the width and height of elements using utility classes. These flexible and responsive classes allow you to define sizes that adapt to various breakpoints. With Mytril, you can seamlessly apply predefined height and width values, streamlining your layout process.
Width classes
| Class | Properties |
|---|---|
| w-auto | auto |
| w-0 | 0 |
| w-25 | 25% |
| w-50 | 50% |
| w-75 | 75% |
| w-100 | 100% |
Height classes
| Class | Properties |
|---|---|
| h-auto | auto |
| h-full | 100dvh |
| h-0 | 0 |
| h-25 | 25% |
| h-50 | 50% |
| h-75 | 75% |
| h-100 | 100% |
Responsive breakpoints
Use these sizing classes in combination with breakpoints to ensure your layouts are responsive. The format {breakpoint}:{property}-{size} allows for easy adjustment. For instance:
lg:w-50sets the width to 50% on large screens.
Breakpoints don’t apply to the smallest xs size, which is inferred.
Usage example:
<div class="h-auto w-75 lg:w-50">My content</div>This example applies a width of 75% by default and switches to 50% on large screens, using Mytril’s utility classes to enhance layout control.