Skip to content

Dimension

Controls the height and width of an element simultaneously.

Utility Properties

d-0

height: 0rem; width: 0rem;

d-1

height: 0.25rem; width: 0.25rem;

d-2

height: 0.5rem; width: 0.5rem;

d-3

height: 0.75rem; width: 0.75rem;

d-4

height: 1rem; width: 1rem;

d-5

height: 1.25rem; width: 1.25rem;

d-6

height: 1.5rem; width: 1.5rem;

d-7

height: 1.75rem; width: 1.75rem;

d-8

height: 2rem; width: 2rem;

d-9

height: 2.25rem; width: 2.25rem;

d-10

height: 2.5rem; width: 2.5rem;

d-11

height: 2.75rem; width: 2.75rem;

d-12

height: 3rem; width: 3rem;

d-13

height: 3.25rem; width: 3.25rem;

d-14

height: 3.5rem; width: 3.5rem;

d-15

height: 3.75rem; width: 3.75rem;

d-16

height: 4rem; width: 4rem;

d-17

height: 4.25rem; width: 4.25rem;

d-18

height: 4.5rem; width: 4.5rem;

d-19

height: 4.75rem; width: 4.75rem;

d-20

height: 5rem; width: 5rem;

d-21

height: 5.25rem; width: 5.25rem;

d-22

height: 5.5rem; width: 5.5rem;

d-23

height: 5.75rem; width: 5.75rem;

d-24

height: 6rem; width: 6rem;

d-25

height: 6.25rem; width: 6.25rem;

d-26

height: 6.5rem; width: 6.5rem;

d-27

height: 6.75rem; width: 6.75rem;

d-28

height: 7rem; width: 7rem;

d-29

height: 7.25rem; width: 7.25rem;

d-30

height: 7.5rem; width: 7.5rem;

d-31

height: 7.75rem; width: 7.75rem;

d-32

height: 8rem; width: 8rem;

d-33

height: 8.25rem; width: 8.25rem;

d-34

height: 8.5rem; width: 8.5rem;

d-35

height: 8.75rem; width: 8.75rem;

d-36

height: 9rem; width: 9rem;

d-37

height: 9.25rem; width: 9.25rem;

d-38

height: 9.5rem; width: 9.5rem;

d-39

height: 9.75rem; width: 9.75rem;

d-40

height: 10rem; width: 10rem;

d-41

height: 10.25rem; width: 10.25rem;

d-42

height: 10.5rem; width: 10.5rem;

d-43

height: 10.75rem; width: 10.75rem;

d-44

height: 11rem; width: 11rem;

d-45

height: 11.25rem; width: 11.25rem;

d-46

height: 11.5rem; width: 11.5rem;

d-47

height: 11.75rem; width: 11.75rem;

d-48

height: 12rem; width: 12rem;

d-49

height: 12.25rem; width: 12.25rem;

d-50

height: 12.5rem; width: 12.5rem;

d-51

height: 12.75rem; width: 12.75rem;

d-52

height: 13rem; width: 13rem;

d-53

height: 13.25rem; width: 13.25rem;

d-54

height: 13.5rem; width: 13.5rem;

d-55

height: 13.75rem; width: 13.75rem;

d-56

height: 14rem; width: 14rem;

d-57

height: 14.25rem; width: 14.25rem;

d-58

height: 14.5rem; width: 14.5rem;

d-59

height: 14.75rem; width: 14.75rem;

d-60

height: 15rem; width: 15rem;

d-61

height: 15.25rem; width: 15.25rem;

d-62

height: 15.5rem; width: 15.5rem;

d-63

height: 15.75rem; width: 15.75rem;

d-64

height: 16rem; width: 16rem;

d-65

height: 16.25rem; width: 16.25rem;

d-66

height: 16.5rem; width: 16.5rem;

d-67

height: 16.75rem; width: 16.75rem;

d-68

height: 17rem; width: 17rem;

d-69

height: 17.25rem; width: 17.25rem;

d-70

height: 17.5rem; width: 17.5rem;

d-71

height: 17.75rem; width: 17.75rem;

d-72

height: 18rem; width: 18rem;

d-73

height: 18.25rem; width: 18.25rem;

d-74

height: 18.5rem; width: 18.5rem;

d-75

height: 18.75rem; width: 18.75rem;

d-76

height: 19rem; width: 19rem;

d-77

height: 19.25rem; width: 19.25rem;

d-78

height: 19.5rem; width: 19.5rem;

d-79

height: 19.75rem; width: 19.75rem;

d-80

height: 20rem; width: 20rem;

d-81

height: 20.25rem; width: 20.25rem;

d-82

height: 20.5rem; width: 20.5rem;

d-83

height: 20.75rem; width: 20.75rem;

d-84

height: 21rem; width: 21rem;

d-85

height: 21.25rem; width: 21.25rem;

d-86

height: 21.5rem; width: 21.5rem;

d-87

height: 21.75rem; width: 21.75rem;

d-88

height: 22rem; width: 22rem;

d-89

height: 22.25rem; width: 22.25rem;

d-90

height: 22.5rem; width: 22.5rem;

d-91

height: 22.75rem; width: 22.75rem;

d-92

height: 23rem; width: 23rem;

d-93

height: 23.25rem; width: 23.25rem;

d-94

height: 23.5rem; width: 23.5rem;

d-95

height: 23.75rem; width: 23.75rem;

d-96

height: 24rem; width: 24rem;

d-97

height: 24.25rem; width: 24.25rem;

d-98

height: 24.5rem; width: 24.5rem;

d-99

height: 24.75rem; width: 24.75rem;

d-100

height: 25rem; width: 25rem;

d-auto

height: auto; width: auto;

d-dvh

height: 100dvh; width: 100dvh;

d-fc

height: fit-content; width: fit-content;

d-full

height: 100%; width: 100%;

d-half

height: 50%; width: 50%;

d-max

height: max-content; width: max-content;

d-min

height: min-content; width: min-content;

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.
16
20
24
<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.

Utility Properties

max-d-0

max-height: 0rem; max-width: 0rem;

max-d-1

max-height: 0.25rem; max-width: 0.25rem;

max-d-2

max-height: 0.5rem; max-width: 0.5rem;

max-d-3

max-height: 0.75rem; max-width: 0.75rem;

max-d-4

max-height: 1rem; max-width: 1rem;

max-d-5

max-height: 1.25rem; max-width: 1.25rem;

max-d-6

max-height: 1.5rem; max-width: 1.5rem;

max-d-7

max-height: 1.75rem; max-width: 1.75rem;

max-d-8

max-height: 2rem; max-width: 2rem;

max-d-9

max-height: 2.25rem; max-width: 2.25rem;

max-d-10

max-height: 2.5rem; max-width: 2.5rem;

max-d-11

max-height: 2.75rem; max-width: 2.75rem;

max-d-12

max-height: 3rem; max-width: 3rem;

max-d-13

max-height: 3.25rem; max-width: 3.25rem;

max-d-14

max-height: 3.5rem; max-width: 3.5rem;

max-d-15

max-height: 3.75rem; max-width: 3.75rem;

max-d-16

max-height: 4rem; max-width: 4rem;

max-d-17

max-height: 4.25rem; max-width: 4.25rem;

max-d-18

max-height: 4.5rem; max-width: 4.5rem;

max-d-19

max-height: 4.75rem; max-width: 4.75rem;

max-d-20

max-height: 5rem; max-width: 5rem;

max-d-21

max-height: 5.25rem; max-width: 5.25rem;

max-d-22

max-height: 5.5rem; max-width: 5.5rem;

max-d-23

max-height: 5.75rem; max-width: 5.75rem;

max-d-24

max-height: 6rem; max-width: 6rem;

max-d-25

max-height: 6.25rem; max-width: 6.25rem;

max-d-26

max-height: 6.5rem; max-width: 6.5rem;

max-d-27

max-height: 6.75rem; max-width: 6.75rem;

max-d-28

max-height: 7rem; max-width: 7rem;

max-d-29

max-height: 7.25rem; max-width: 7.25rem;

max-d-30

max-height: 7.5rem; max-width: 7.5rem;

max-d-31

max-height: 7.75rem; max-width: 7.75rem;

max-d-32

max-height: 8rem; max-width: 8rem;

max-d-33

max-height: 8.25rem; max-width: 8.25rem;

max-d-34

max-height: 8.5rem; max-width: 8.5rem;

max-d-35

max-height: 8.75rem; max-width: 8.75rem;

max-d-36

max-height: 9rem; max-width: 9rem;

max-d-37

max-height: 9.25rem; max-width: 9.25rem;

max-d-38

max-height: 9.5rem; max-width: 9.5rem;

max-d-39

max-height: 9.75rem; max-width: 9.75rem;

max-d-40

max-height: 10rem; max-width: 10rem;

max-d-41

max-height: 10.25rem; max-width: 10.25rem;

max-d-42

max-height: 10.5rem; max-width: 10.5rem;

max-d-43

max-height: 10.75rem; max-width: 10.75rem;

max-d-44

max-height: 11rem; max-width: 11rem;

max-d-45

max-height: 11.25rem; max-width: 11.25rem;

max-d-46

max-height: 11.5rem; max-width: 11.5rem;

max-d-47

max-height: 11.75rem; max-width: 11.75rem;

max-d-48

max-height: 12rem; max-width: 12rem;

max-d-49

max-height: 12.25rem; max-width: 12.25rem;

max-d-50

max-height: 12.5rem; max-width: 12.5rem;

max-d-51

max-height: 12.75rem; max-width: 12.75rem;

max-d-52

max-height: 13rem; max-width: 13rem;

max-d-53

max-height: 13.25rem; max-width: 13.25rem;

max-d-54

max-height: 13.5rem; max-width: 13.5rem;

max-d-55

max-height: 13.75rem; max-width: 13.75rem;

max-d-56

max-height: 14rem; max-width: 14rem;

max-d-57

max-height: 14.25rem; max-width: 14.25rem;

max-d-58

max-height: 14.5rem; max-width: 14.5rem;

max-d-59

max-height: 14.75rem; max-width: 14.75rem;

max-d-60

max-height: 15rem; max-width: 15rem;

max-d-61

max-height: 15.25rem; max-width: 15.25rem;

max-d-62

max-height: 15.5rem; max-width: 15.5rem;

max-d-63

max-height: 15.75rem; max-width: 15.75rem;

max-d-64

max-height: 16rem; max-width: 16rem;

max-d-65

max-height: 16.25rem; max-width: 16.25rem;

max-d-66

max-height: 16.5rem; max-width: 16.5rem;

max-d-67

max-height: 16.75rem; max-width: 16.75rem;

max-d-68

max-height: 17rem; max-width: 17rem;

max-d-69

max-height: 17.25rem; max-width: 17.25rem;

max-d-70

max-height: 17.5rem; max-width: 17.5rem;

max-d-71

max-height: 17.75rem; max-width: 17.75rem;

max-d-72

max-height: 18rem; max-width: 18rem;

max-d-73

max-height: 18.25rem; max-width: 18.25rem;

max-d-74

max-height: 18.5rem; max-width: 18.5rem;

max-d-75

max-height: 18.75rem; max-width: 18.75rem;

max-d-76

max-height: 19rem; max-width: 19rem;

max-d-77

max-height: 19.25rem; max-width: 19.25rem;

max-d-78

max-height: 19.5rem; max-width: 19.5rem;

max-d-79

max-height: 19.75rem; max-width: 19.75rem;

max-d-80

max-height: 20rem; max-width: 20rem;

max-d-81

max-height: 20.25rem; max-width: 20.25rem;

max-d-82

max-height: 20.5rem; max-width: 20.5rem;

max-d-83

max-height: 20.75rem; max-width: 20.75rem;

max-d-84

max-height: 21rem; max-width: 21rem;

max-d-85

max-height: 21.25rem; max-width: 21.25rem;

max-d-86

max-height: 21.5rem; max-width: 21.5rem;

max-d-87

max-height: 21.75rem; max-width: 21.75rem;

max-d-88

max-height: 22rem; max-width: 22rem;

max-d-89

max-height: 22.25rem; max-width: 22.25rem;

max-d-90

max-height: 22.5rem; max-width: 22.5rem;

max-d-91

max-height: 22.75rem; max-width: 22.75rem;

max-d-92

max-height: 23rem; max-width: 23rem;

max-d-93

max-height: 23.25rem; max-width: 23.25rem;

max-d-94

max-height: 23.5rem; max-width: 23.5rem;

max-d-95

max-height: 23.75rem; max-width: 23.75rem;

max-d-96

max-height: 24rem; max-width: 24rem;

max-d-97

max-height: 24.25rem; max-width: 24.25rem;

max-d-98

max-height: 24.5rem; max-width: 24.5rem;

max-d-99

max-height: 24.75rem; max-width: 24.75rem;

max-d-100

max-height: 25rem; max-width: 25rem;

max-d-auto

max-height: auto; max-width: auto;

max-d-dvh

max-height: 100dvh; max-width: 100dvh;

max-d-fc

max-height: fit-content; max-width: fit-content;

max-d-full

max-height: 100%; max-width: 100%;

max-d-half

max-height: 50%; max-width: 50%;

max-d-max

max-height: max-content; max-width: max-content;

max-d-min

max-height: min-content; max-width: min-content;

This example sets the maximum height and width of an element to 16rem. 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.
64
<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.

Utility Properties
Failed to load data. Please try again later.

This example sets the minimum height and width of an element to 16rem. The min-d-64 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.
32
<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>

Conditional styles

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

Media modifier

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

<div class="d-1 md:d-2 ..."></div>

Hover modifier

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

<div class="d-1 h:d-2 ..."></div>