Dimension

Controls the height and width of an element simultaneously.

Class	Style
`d-0`	`height: 0rem;`
`d-1`	`height: 0.25rem;`
`d-2`	`height: 0.5rem;`
`d-3`	`height: 0.75rem;`
`d-4`	`height: 1rem;`
`d-5`	`height: 1.25rem;`
`d-6`	`height: 1.5rem;`
`d-7`	`height: 1.75rem;`
`d-8`	`height: 2rem;`
`d-9`	`height: 2.25rem;`
`d-10`	`height: 2.5rem;`
`d-11`	`height: 2.75rem;`
`d-12`	`height: 3rem;`
`d-13`	`height: 3.25rem;`
`d-14`	`height: 3.5rem;`
`d-15`	`height: 3.75rem;`
`d-16`	`height: 4rem;`
`d-17`	`height: 4.25rem;`
`d-18`	`height: 4.5rem;`
`d-19`	`height: 4.75rem;`
`d-20`	`height: 5rem;`
`d-21`	`height: 5.25rem;`
`d-22`	`height: 5.5rem;`
`d-23`	`height: 5.75rem;`
`d-24`	`height: 6rem;`
`d-25`	`height: 6.25rem;`
`d-26`	`height: 6.5rem;`
`d-27`	`height: 6.75rem;`
`d-28`	`height: 7rem;`
`d-29`	`height: 7.25rem;`
`d-30`	`height: 7.5rem;`
`d-31`	`height: 7.75rem;`
`d-32`	`height: 8rem;`
`d-33`	`height: 8.25rem;`
`d-34`	`height: 8.5rem;`
`d-35`	`height: 8.75rem;`
`d-36`	`height: 9rem;`
`d-37`	`height: 9.25rem;`
`d-38`	`height: 9.5rem;`
`d-39`	`height: 9.75rem;`
`d-40`	`height: 10rem;`
`d-41`	`height: 10.25rem;`
`d-42`	`height: 10.5rem;`
`d-43`	`height: 10.75rem;`
`d-44`	`height: 11rem;`
`d-45`	`height: 11.25rem;`
`d-46`	`height: 11.5rem;`
`d-47`	`height: 11.75rem;`
`d-48`	`height: 12rem;`
`d-49`	`height: 12.25rem;`
`d-50`	`height: 12.5rem;`
`d-51`	`height: 12.75rem;`
`d-52`	`height: 13rem;`
`d-53`	`height: 13.25rem;`
`d-54`	`height: 13.5rem;`
`d-55`	`height: 13.75rem;`
`d-56`	`height: 14rem;`
`d-57`	`height: 14.25rem;`
`d-58`	`height: 14.5rem;`
`d-59`	`height: 14.75rem;`
`d-60`	`height: 15rem;`
`d-61`	`height: 15.25rem;`
`d-62`	`height: 15.5rem;`
`d-63`	`height: 15.75rem;`
`d-64`	`height: 16rem;`
`d-65`	`height: 16.25rem;`
`d-66`	`height: 16.5rem;`
`d-67`	`height: 16.75rem;`
`d-68`	`height: 17rem;`
`d-69`	`height: 17.25rem;`
`d-70`	`height: 17.5rem;`
`d-71`	`height: 17.75rem;`
`d-72`	`height: 18rem;`
`d-73`	`height: 18.25rem;`
`d-74`	`height: 18.5rem;`
`d-75`	`height: 18.75rem;`
`d-76`	`height: 19rem;`
`d-77`	`height: 19.25rem;`
`d-78`	`height: 19.5rem;`
`d-79`	`height: 19.75rem;`
`d-80`	`height: 20rem;`
`d-81`	`height: 20.25rem;`
`d-82`	`height: 20.5rem;`
`d-83`	`height: 20.75rem;`
`d-84`	`height: 21rem;`
`d-85`	`height: 21.25rem;`
`d-86`	`height: 21.5rem;`
`d-87`	`height: 21.75rem;`
`d-88`	`height: 22rem;`
`d-89`	`height: 22.25rem;`
`d-90`	`height: 22.5rem;`
`d-91`	`height: 22.75rem;`
`d-92`	`height: 23rem;`
`d-93`	`height: 23.25rem;`
`d-94`	`height: 23.5rem;`
`d-95`	`height: 23.75rem;`
`d-96`	`height: 24rem;`
`d-97`	`height: 24.25rem;`
`d-98`	`height: 24.5rem;`
`d-99`	`height: 24.75rem;`
`d-100`	`height: 25rem;`
`d-auto`	`height: auto;`
`d-dvh`	`height: 100dvh;`
`d-dvw`	`height: 100dvw;`
`d-vh`	`height: 100vh;`
`d-vw`	`height: 100vw;`
`d-fc`	`height: fit-content;`
`d-full`	`height: 100%;`
`d-half`	`height: 50%;`
`d-max`	`height: max-content;`
`d-min`	`height: min-content;`
`d-px`	`height: 1px;`
`d-sm`	`height: 40rem;`
`d-md`	`height: 48rem;`
`d-lg`	`height: 64rem;`
`d-xl`	`height: 80rem;`
`d-xxl`	`height: 96rem;`

This example showcases various dimension utilities:

The 4rem dimension utility creates a relatively small size element.
The 5rem dimension utility creates a medium size element.
The 6rem dimension utility creates a large size element.

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="ai-c bg-indigo d-f d-16 jc-c rad-1 tc-white">16</div>
  <div class="ai-c bg-indigo d-f d-20 jc-c rad-1 tc-white">20</div>
  <div class="ai-c bg-indigo d-f d-24 jc-c rad-1 tc-white">24</div>
</div>

Max Dimension

Controls the maximum height and max width of an element at once.

Class	Style
`max-d-0`	`max-height: 0rem;`
`max-d-1`	`max-height: 0.25rem;`
`max-d-2`	`max-height: 0.5rem;`
`max-d-3`	`max-height: 0.75rem;`
`max-d-4`	`max-height: 1rem;`
`max-d-5`	`max-height: 1.25rem;`
`max-d-6`	`max-height: 1.5rem;`
`max-d-7`	`max-height: 1.75rem;`
`max-d-8`	`max-height: 2rem;`
`max-d-9`	`max-height: 2.25rem;`
`max-d-10`	`max-height: 2.5rem;`
`max-d-11`	`max-height: 2.75rem;`
`max-d-12`	`max-height: 3rem;`
`max-d-13`	`max-height: 3.25rem;`
`max-d-14`	`max-height: 3.5rem;`
`max-d-15`	`max-height: 3.75rem;`
`max-d-16`	`max-height: 4rem;`
`max-d-17`	`max-height: 4.25rem;`
`max-d-18`	`max-height: 4.5rem;`
`max-d-19`	`max-height: 4.75rem;`
`max-d-20`	`max-height: 5rem;`
`max-d-21`	`max-height: 5.25rem;`
`max-d-22`	`max-height: 5.5rem;`
`max-d-23`	`max-height: 5.75rem;`
`max-d-24`	`max-height: 6rem;`
`max-d-25`	`max-height: 6.25rem;`
`max-d-26`	`max-height: 6.5rem;`
`max-d-27`	`max-height: 6.75rem;`
`max-d-28`	`max-height: 7rem;`
`max-d-29`	`max-height: 7.25rem;`
`max-d-30`	`max-height: 7.5rem;`
`max-d-31`	`max-height: 7.75rem;`
`max-d-32`	`max-height: 8rem;`
`max-d-33`	`max-height: 8.25rem;`
`max-d-34`	`max-height: 8.5rem;`
`max-d-35`	`max-height: 8.75rem;`
`max-d-36`	`max-height: 9rem;`
`max-d-37`	`max-height: 9.25rem;`
`max-d-38`	`max-height: 9.5rem;`
`max-d-39`	`max-height: 9.75rem;`
`max-d-40`	`max-height: 10rem;`
`max-d-41`	`max-height: 10.25rem;`
`max-d-42`	`max-height: 10.5rem;`
`max-d-43`	`max-height: 10.75rem;`
`max-d-44`	`max-height: 11rem;`
`max-d-45`	`max-height: 11.25rem;`
`max-d-46`	`max-height: 11.5rem;`
`max-d-47`	`max-height: 11.75rem;`
`max-d-48`	`max-height: 12rem;`
`max-d-49`	`max-height: 12.25rem;`
`max-d-50`	`max-height: 12.5rem;`
`max-d-51`	`max-height: 12.75rem;`
`max-d-52`	`max-height: 13rem;`
`max-d-53`	`max-height: 13.25rem;`
`max-d-54`	`max-height: 13.5rem;`
`max-d-55`	`max-height: 13.75rem;`
`max-d-56`	`max-height: 14rem;`
`max-d-57`	`max-height: 14.25rem;`
`max-d-58`	`max-height: 14.5rem;`
`max-d-59`	`max-height: 14.75rem;`
`max-d-60`	`max-height: 15rem;`
`max-d-61`	`max-height: 15.25rem;`
`max-d-62`	`max-height: 15.5rem;`
`max-d-63`	`max-height: 15.75rem;`
`max-d-64`	`max-height: 16rem;`
`max-d-65`	`max-height: 16.25rem;`
`max-d-66`	`max-height: 16.5rem;`
`max-d-67`	`max-height: 16.75rem;`
`max-d-68`	`max-height: 17rem;`
`max-d-69`	`max-height: 17.25rem;`
`max-d-70`	`max-height: 17.5rem;`
`max-d-71`	`max-height: 17.75rem;`
`max-d-72`	`max-height: 18rem;`
`max-d-73`	`max-height: 18.25rem;`
`max-d-74`	`max-height: 18.5rem;`
`max-d-75`	`max-height: 18.75rem;`
`max-d-76`	`max-height: 19rem;`
`max-d-77`	`max-height: 19.25rem;`
`max-d-78`	`max-height: 19.5rem;`
`max-d-79`	`max-height: 19.75rem;`
`max-d-80`	`max-height: 20rem;`
`max-d-81`	`max-height: 20.25rem;`
`max-d-82`	`max-height: 20.5rem;`
`max-d-83`	`max-height: 20.75rem;`
`max-d-84`	`max-height: 21rem;`
`max-d-85`	`max-height: 21.25rem;`
`max-d-86`	`max-height: 21.5rem;`
`max-d-87`	`max-height: 21.75rem;`
`max-d-88`	`max-height: 22rem;`
`max-d-89`	`max-height: 22.25rem;`
`max-d-90`	`max-height: 22.5rem;`
`max-d-91`	`max-height: 22.75rem;`
`max-d-92`	`max-height: 23rem;`
`max-d-93`	`max-height: 23.25rem;`
`max-d-94`	`max-height: 23.5rem;`
`max-d-95`	`max-height: 23.75rem;`
`max-d-96`	`max-height: 24rem;`
`max-d-97`	`max-height: 24.25rem;`
`max-d-98`	`max-height: 24.5rem;`
`max-d-99`	`max-height: 24.75rem;`
`max-d-100`	`max-height: 25rem;`
`max-d-auto`	`max-height: auto;`
`max-d-dvh`	`max-height: 100dvh;`
`max-d-dvw`	`max-height: 100dvw;`
`max-d-vh`	`max-height: 100vh;`
`max-d-vw`	`max-height: 100vw;`
`max-d-fc`	`max-height: fit-content;`
`max-d-full`	`max-height: 100%;`
`max-d-half`	`max-height: 50%;`
`max-d-max`	`max-height: max-content;`
`max-d-min`	`max-height: min-content;`
`max-d-px`	`max-height: 1px;`
`max-d-sm`	`max-height: 40rem;`
`max-d-md`	`max-height: 48rem;`
`max-d-lg`	`max-height: 64rem;`
`max-d-xl`	`max-height: 80rem;`
`max-d-xxl`	`max-height: 96rem;`

The max-d-64 utility ensures the element does not exceed a size of 16rem in both height and width.

Try changing the vertical size of the box to see how wide it can be at the maximum size.

<div class="o-auto ai-c bg-indigo d-16 d-f jc-c max-d-64 min-d-32 p-6 r-b rad-1 tc-white">64</div>

Min Dimension

Controls the minimum height and min width of an element at once.

Class	Style
`min-d-0`	`min-height: 0rem;`
`min-d-1`	`min-height: 0.25rem;`
`min-d-2`	`min-height: 0.5rem;`
`min-d-3`	`min-height: 0.75rem;`
`min-d-4`	`min-height: 1rem;`
`min-d-5`	`min-height: 1.25rem;`
`min-d-6`	`min-height: 1.5rem;`
`min-d-7`	`min-height: 1.75rem;`
`min-d-8`	`min-height: 2rem;`
`min-d-9`	`min-height: 2.25rem;`
`min-d-10`	`min-height: 2.5rem;`
`min-d-11`	`min-height: 2.75rem;`
`min-d-12`	`min-height: 3rem;`
`min-d-13`	`min-height: 3.25rem;`
`min-d-14`	`min-height: 3.5rem;`
`min-d-15`	`min-height: 3.75rem;`
`min-d-16`	`min-height: 4rem;`
`min-d-17`	`min-height: 4.25rem;`
`min-d-18`	`min-height: 4.5rem;`
`min-d-19`	`min-height: 4.75rem;`
`min-d-20`	`min-height: 5rem;`
`min-d-21`	`min-height: 5.25rem;`
`min-d-22`	`min-height: 5.5rem;`
`min-d-23`	`min-height: 5.75rem;`
`min-d-24`	`min-height: 6rem;`
`min-d-25`	`min-height: 6.25rem;`
`min-d-26`	`min-height: 6.5rem;`
`min-d-27`	`min-height: 6.75rem;`
`min-d-28`	`min-height: 7rem;`
`min-d-29`	`min-height: 7.25rem;`
`min-d-30`	`min-height: 7.5rem;`
`min-d-31`	`min-height: 7.75rem;`
`min-d-32`	`min-height: 8rem;`
`min-d-33`	`min-height: 8.25rem;`
`min-d-34`	`min-height: 8.5rem;`
`min-d-35`	`min-height: 8.75rem;`
`min-d-36`	`min-height: 9rem;`
`min-d-37`	`min-height: 9.25rem;`
`min-d-38`	`min-height: 9.5rem;`
`min-d-39`	`min-height: 9.75rem;`
`min-d-40`	`min-height: 10rem;`
`min-d-41`	`min-height: 10.25rem;`
`min-d-42`	`min-height: 10.5rem;`
`min-d-43`	`min-height: 10.75rem;`
`min-d-44`	`min-height: 11rem;`
`min-d-45`	`min-height: 11.25rem;`
`min-d-46`	`min-height: 11.5rem;`
`min-d-47`	`min-height: 11.75rem;`
`min-d-48`	`min-height: 12rem;`
`min-d-49`	`min-height: 12.25rem;`
`min-d-50`	`min-height: 12.5rem;`
`min-d-51`	`min-height: 12.75rem;`
`min-d-52`	`min-height: 13rem;`
`min-d-53`	`min-height: 13.25rem;`
`min-d-54`	`min-height: 13.5rem;`
`min-d-55`	`min-height: 13.75rem;`
`min-d-56`	`min-height: 14rem;`
`min-d-57`	`min-height: 14.25rem;`
`min-d-58`	`min-height: 14.5rem;`
`min-d-59`	`min-height: 14.75rem;`
`min-d-60`	`min-height: 15rem;`
`min-d-61`	`min-height: 15.25rem;`
`min-d-62`	`min-height: 15.5rem;`
`min-d-63`	`min-height: 15.75rem;`
`min-d-64`	`min-height: 16rem;`
`min-d-65`	`min-height: 16.25rem;`
`min-d-66`	`min-height: 16.5rem;`
`min-d-67`	`min-height: 16.75rem;`
`min-d-68`	`min-height: 17rem;`
`min-d-69`	`min-height: 17.25rem;`
`min-d-70`	`min-height: 17.5rem;`
`min-d-71`	`min-height: 17.75rem;`
`min-d-72`	`min-height: 18rem;`
`min-d-73`	`min-height: 18.25rem;`
`min-d-74`	`min-height: 18.5rem;`
`min-d-75`	`min-height: 18.75rem;`
`min-d-76`	`min-height: 19rem;`
`min-d-77`	`min-height: 19.25rem;`
`min-d-78`	`min-height: 19.5rem;`
`min-d-79`	`min-height: 19.75rem;`
`min-d-80`	`min-height: 20rem;`
`min-d-81`	`min-height: 20.25rem;`
`min-d-82`	`min-height: 20.5rem;`
`min-d-83`	`min-height: 20.75rem;`
`min-d-84`	`min-height: 21rem;`
`min-d-85`	`min-height: 21.25rem;`
`min-d-86`	`min-height: 21.5rem;`
`min-d-87`	`min-height: 21.75rem;`
`min-d-88`	`min-height: 22rem;`
`min-d-89`	`min-height: 22.25rem;`
`min-d-90`	`min-height: 22.5rem;`
`min-d-91`	`min-height: 22.75rem;`
`min-d-92`	`min-height: 23rem;`
`min-d-93`	`min-height: 23.25rem;`
`min-d-94`	`min-height: 23.5rem;`
`min-d-95`	`min-height: 23.75rem;`
`min-d-96`	`min-height: 24rem;`
`min-d-97`	`min-height: 24.25rem;`
`min-d-98`	`min-height: 24.5rem;`
`min-d-99`	`min-height: 24.75rem;`
`min-d-100`	`min-height: 25rem;`
`min-d-auto`	`min-height: auto;`
`min-d-dvh`	`min-height: 100dvh;`
`min-d-dvw`	`min-height: 100dvw;`
`min-d-vh`	`min-height: 100vh;`
`min-d-vw`	`min-height: 100vw;`
`min-d-fc`	`min-height: fit-content;`
`min-d-full`	`min-height: 100%;`
`min-d-half`	`min-height: 50%;`
`min-d-max`	`min-height: max-content;`
`min-d-min`	`min-height: min-content;`
`min-d-px`	`min-height: 1px;`
`min-d-sm`	`min-height: 40rem;`
`min-d-md`	`min-height: 48rem;`
`min-d-lg`	`min-height: 64rem;`
`min-d-xl`	`min-height: 80rem;`
`min-d-xxl`	`min-height: 96rem;`

The min-d-32 utility ensures the element does not shrink below a size of 16rem in both height and width.

Try changing the vertical size of the box to see how wide it can be at the maximum size.

<div class="o-auto ai-c bg-indigo d-16 d-f jc-c max-d-64 min-d-32 p-6 r-b rad-1 tc-white">32</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:d-*, md:d-*, lg:d-*, and xxl:d-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:d-* utility to override elements and change their values when hovering over them.