Skip to main content

​
Width

Control element width with percentage and auto utilities.

Width Properties

.w-full100%width: 100%;Full width
.w-autoAutowidth: auto;Auto width
.w-1-250%width: 50%;Half width
.w-1-333.333%width: 33.333%;One third
.w-2-366.666%width: 66.666%;Two thirds
.w-1-425%width: 25%;Quarter width
.w-3-475%width: 75%;Three quarters

​
Max Width

Control maximum width with responsive breakpoints.

Max Width Properties

.max-w-sm400pxmax-width: 400px;Small max width
.max-w-md600pxmax-width: 600px;Medium max width
.max-w-lg800pxmax-width: 800px;Large max width
.max-w-xl1000pxmax-width: 1000px;Extra large max width
.max-w-2xl1200pxmax-width: 1200px;2x large max width
.max-w-full100%max-width: 100%;Full max width

​
Height

Control element height with viewport and percentage units.

Height Properties

.h-full100%height: 100%;Full height
.h-autoAutoheight: auto;Auto height
.h-screen100vhheight: 100vh;Full viewport height

​
Min Height

Control minimum height for content areas.

Min Height Properties

.min-h-screen100vhmin-height: 100vh;Full viewport height
.min-h-full100%min-height: 100%;Full height

​
Common Sizing Patterns

​
Responsive Grid

<div class="flex flex-wrap gap-6">
  <div class="w-full md:w-1-2 lg:w-1-3">
    <div class="card p-6">Responsive Card</div>
  </div>
</div>

​
Centered Container

<div class="max-w-2xl mx-auto p-6">
  <h1 class="text-3xl font-700 mb-4">Centered Content</h1>
  <p class="text-gray">Content with max width</p>
</div>

​
Full Height Layout

<div class="min-h-screen flex items-center justify-center">
  <div class="max-w-md p-8 text-center">
    <h1 class="text-4xl font-700 mb-4">Full Height</h1>
    <button class="btn btn-blue">Get Started</button>
  </div>
</div>

Layout

Display utilities for sizing

Spacing

Margin and padding utilities