Inline Size

Utilities for controlling the inline-size of an element.

Class CSS Output
inline-auto
inline-size: auto;
}
inline-full
inline-size: 100%;
}
inline-screen
inline-size: 100vw;
}
inline-0
inline-size: calc(var(--spacing) * 0);
}
inline-4
inline-size: calc(var(--spacing) * 4);
}
inline-8
inline-size: calc(var(--spacing) * 8);
}
inline-1/2
inline-size: calc(1/2 * 100%);
}
inline-1/3
inline-size: calc(1/3 * 100%);
}
inline-[100px]
inline-size: 100px;
}

inline-auto

inline-size: auto;

inline-full

inline-size: 100%;

inline-screen

inline-size: 100vw;

inline-0

inline-size: calc(var(--spacing) * 0);

inline-4

inline-size: calc(var(--spacing) * 4);

inline-8

inline-size: calc(var(--spacing) * 8);

inline-1/2

inline-size: calc(1/2 * 100%);

inline-1/3

inline-size: calc(1/3 * 100%);

inline-[100px]

inline-size: 100px;

Reference

inline-size MDN ↗

CSS Properties

  • inline-size