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 dimensions: 4rem, 5rem, and 6rem. The element will be relatively small in size, will be slightly larger and noticeably larger, respectively.

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

min-d-0

min-height: 0rem; min-width: 0rem;

min-d-1

min-height: 0.25rem; min-width: 0.25rem;

min-d-2

min-height: 0.5rem; min-width: 0.5rem;

min-d-3

min-height: 0.75rem; min-width: 0.75rem;

min-d-4

min-height: 1rem; min-width: 1rem;

min-d-5

min-height: 1.25rem; min-width: 1.25rem;

min-d-6

min-height: 1.5rem; min-width: 1.5rem;

min-d-7

min-height: 1.75rem; min-width: 1.75rem;

min-d-8

min-height: 2rem; min-width: 2rem;

min-d-9

min-height: 2.25rem; min-width: 2.25rem;

min-d-10

min-height: 2.5rem; min-width: 2.5rem;

min-d-11

min-height: 2.75rem; min-width: 2.75rem;

min-d-12

min-height: 3rem; min-width: 3rem;

min-d-13

min-height: 3.25rem; min-width: 3.25rem;

min-d-14

min-height: 3.5rem; min-width: 3.5rem;

min-d-15

min-height: 3.75rem; min-width: 3.75rem;

min-d-16

min-height: 4rem; min-width: 4rem;

min-d-17

min-height: 4.25rem; min-width: 4.25rem;

min-d-18

min-height: 4.5rem; min-width: 4.5rem;

min-d-19

min-height: 4.75rem; min-width: 4.75rem;

min-d-20

min-height: 5rem; min-width: 5rem;

min-d-21

min-height: 5.25rem; min-width: 5.25rem;

min-d-22

min-height: 5.5rem; min-width: 5.5rem;

min-d-23

min-height: 5.75rem; min-width: 5.75rem;

min-d-24

min-height: 6rem; min-width: 6rem;

min-d-25

min-height: 6.25rem; min-width: 6.25rem;

min-d-26

min-height: 6.5rem; min-width: 6.5rem;

min-d-27

min-height: 6.75rem; min-width: 6.75rem;

min-d-28

min-height: 7rem; min-width: 7rem;

min-d-29

min-height: 7.25rem; min-width: 7.25rem;

min-d-30

min-height: 7.5rem; min-width: 7.5rem;

min-d-31

min-height: 7.75rem; min-width: 7.75rem;

min-d-32

min-height: 8rem; min-width: 8rem;

min-d-33

min-height: 8.25rem; min-width: 8.25rem;

min-d-34

min-height: 8.5rem; min-width: 8.5rem;

min-d-35

min-height: 8.75rem; min-width: 8.75rem;

min-d-36

min-height: 9rem; min-width: 9rem;

min-d-37

min-height: 9.25rem; min-width: 9.25rem;

min-d-38

min-height: 9.5rem; min-width: 9.5rem;

min-d-39

min-height: 9.75rem; min-width: 9.75rem;

min-d-40

min-height: 10rem; min-width: 10rem;

min-d-41

min-height: 10.25rem; min-width: 10.25rem;

min-d-42

min-height: 10.5rem; min-width: 10.5rem;

min-d-43

min-height: 10.75rem; min-width: 10.75rem;

min-d-44

min-height: 11rem; min-width: 11rem;

min-d-45

min-height: 11.25rem; min-width: 11.25rem;

min-d-46

min-height: 11.5rem; min-width: 11.5rem;

min-d-47

min-height: 11.75rem; min-width: 11.75rem;

min-d-48

min-height: 12rem; min-width: 12rem;

min-d-49

min-height: 12.25rem; min-width: 12.25rem;

min-d-50

min-height: 12.5rem; min-width: 12.5rem;

min-d-51

min-height: 12.75rem; min-width: 12.75rem;

min-d-52

min-height: 13rem; min-width: 13rem;

min-d-53

min-height: 13.25rem; min-width: 13.25rem;

min-d-54

min-height: 13.5rem; min-width: 13.5rem;

min-d-55

min-height: 13.75rem; min-width: 13.75rem;

min-d-56

min-height: 14rem; min-width: 14rem;

min-d-57

min-height: 14.25rem; min-width: 14.25rem;

min-d-58

min-height: 14.5rem; min-width: 14.5rem;

min-d-59

min-height: 14.75rem; min-width: 14.75rem;

min-d-60

min-height: 15rem; min-width: 15rem;

min-d-61

min-height: 15.25rem; min-width: 15.25rem;

min-d-62

min-height: 15.5rem; min-width: 15.5rem;

min-d-63

min-height: 15.75rem; min-width: 15.75rem;

min-d-64

min-height: 16rem; min-width: 16rem;

min-d-65

min-height: 16.25rem; min-width: 16.25rem;

min-d-66

min-height: 16.5rem; min-width: 16.5rem;

min-d-67

min-height: 16.75rem; min-width: 16.75rem;

min-d-68

min-height: 17rem; min-width: 17rem;

min-d-69

min-height: 17.25rem; min-width: 17.25rem;

min-d-70

min-height: 17.5rem; min-width: 17.5rem;

min-d-71

min-height: 17.75rem; min-width: 17.75rem;

min-d-72

min-height: 18rem; min-width: 18rem;

min-d-73

min-height: 18.25rem; min-width: 18.25rem;

min-d-74

min-height: 18.5rem; min-width: 18.5rem;

min-d-75

min-height: 18.75rem; min-width: 18.75rem;

min-d-76

min-height: 19rem; min-width: 19rem;

min-d-77

min-height: 19.25rem; min-width: 19.25rem;

min-d-78

min-height: 19.5rem; min-width: 19.5rem;

min-d-79

min-height: 19.75rem; min-width: 19.75rem;

min-d-80

min-height: 20rem; min-width: 20rem;

min-d-81

min-height: 20.25rem; min-width: 20.25rem;

min-d-82

min-height: 20.5rem; min-width: 20.5rem;

min-d-83

min-height: 20.75rem; min-width: 20.75rem;

min-d-84

min-height: 21rem; min-width: 21rem;

min-d-85

min-height: 21.25rem; min-width: 21.25rem;

min-d-86

min-height: 21.5rem; min-width: 21.5rem;

min-d-87

min-height: 21.75rem; min-width: 21.75rem;

min-d-88

min-height: 22rem; min-width: 22rem;

min-d-89

min-height: 22.25rem; min-width: 22.25rem;

min-d-90

min-height: 22.5rem; min-width: 22.5rem;

min-d-91

min-height: 22.75rem; min-width: 22.75rem;

min-d-92

min-height: 23rem; min-width: 23rem;

min-d-93

min-height: 23.25rem; min-width: 23.25rem;

min-d-94

min-height: 23.5rem; min-width: 23.5rem;

min-d-95

min-height: 23.75rem; min-width: 23.75rem;

min-d-96

min-height: 24rem; min-width: 24rem;

min-d-97

min-height: 24.25rem; min-width: 24.25rem;

min-d-98

min-height: 24.5rem; min-width: 24.5rem;

min-d-99

min-height: 24.75rem; min-width: 24.75rem;

min-d-100

min-height: 25rem; min-width: 25rem;

min-d-auto

min-height: auto; min-width: auto;

min-d-dvh

min-height: 100dvh; min-width: 100dvh;

min-d-fc

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

min-d-full

min-height: 100%; min-width: 100%;

min-d-half

min-height: 50%; min-width: 50%;

min-d-max

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

min-d-min

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

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 modifiers

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

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

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

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