Dimension

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
Error: 429

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 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>