Width
Use the width or w property to set the width of an element.
// hardcoded values
<Box width="64px" />
<Box w="4rem" />
// token values
<Box width="5" />
<Box w="5" />Fractional width
Use can set fractional widths using the width or w property.
Values can be within the following ranges:
- Thirds:
1/3to2/3 - Fourths:
1/4to3/4 - Fifths:
1/5to4/5 - Sixths:
1/6to5/6 - Twelfths:
1/12to11/12
// half width
<Flex>
<Box width="1/2" />
<Box width="1/2" />
</Flex>
// thirds
<Flex>
<Box width="1/3" />
<Box width="2/3" />
</Flex>
// fourths
<Flex>
<Box width="1/4" />
<Box width="3/4" />
</Flex>
// fifths
<Flex>
<Box width="1/5" />
<Box width="4/5" />
</Flex>
// sixths
<Flex>
<Box width="1/6" />
<Box width="5/6" />
</Flex>
// twelfths
<Flex>
<Box width="3/12" />
<Box width="9/12" />
</Flex>Viewport width
Use the modern viewport width values dvw, svw, lvw.
dvw maps to 100dvw, svw maps to 100svw, lvw maps to 100lvw.
<Box width="dvw" />
<Box w="dvw" /> // shorthand| Prop | CSS Property | Token Category |
|---|---|---|
w, width | width | sizes |
Max width
Use the maxWidth or maxW property to set the maximum width of an element.
// hardcoded values
<Box maxWidth="640px" />
<Box maxW="4rem" /> // shorthand
// token values
<Box maxWidth="xl" />
<Box maxW="2xl" /> // shorthand| Prop | CSS Property | Token Category |
|---|---|---|
maxW, maxWidth | max-width | sizes |
Min width
Use the minWidth or minW property to set the minimum width of an element.
// hardcoded values
<Box minWidth="64px" />
<Box minW="4rem" /> // shorthand
// token values
<Box minWidth="8" />
<Box minW="10" /> // shorthand| Prop | CSS Property | Token Category |
|---|---|---|
w, width | width | sizing |
maxW, maxWidth | max-width | sizing |
minW, minWidth | min-width | sizing |
Height
Use the height or h property to set the height of an element.
// hardcoded values
<Box height="40px" />
<Box h="0.4rem" /> // shorthand
// token values
<Box height="5" />
<Box h="5" /> // shorthandFractional height
Use can set fractional heights using the height or h property.
Values can be within the following ranges:
- Thirds:
1/3to2/3 - Fourths:
1/4to3/4 - Fifths:
1/5to4/5 - Sixths:
1/6to5/6
<Box height="1/2" />
<Box h="1/2" /> // shorthandRelative heights
Use the modern relative height values dvh, svh, lvh.
dvh maps to 100dvh, svh maps to 100svh, lvh maps to 100lvh.
<Box height="dvh" />
<Box h="dvh" /> // shorthandMax height
Use the maxHeight or maxH property to set the maximum height of an element.
// hardcoded values
<Box maxHeight="40px" />
<Box maxH="0.4rem" /> // shorthand
// token values
<Box maxHeight="8" />
<Box maxH="10" /> // shorthandMin height
Use the minHeight or minH property to set the minimum height of an element.
// hardcoded values
<Box minHeight="40px" />
<Box minH="0.4rem" /> // shorthand
// token values
<Box minHeight="8" />
<Box minH="10" /> // shorthand| Prop | CSS Property | Token Category |
|---|---|---|
h, height | height | sizes |
maxH, maxHeight | max-height | sizes |
minH, minHeight | min-height | sizes |