Dimension

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

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

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

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

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:dim-*,md:dim-*, lg:dim-*, and xxl:dim-* allows targeting specific utilities in different viewports.

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

Hover modifiers

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

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