The aspect-ratio utility sets element's intrinsic width-to-height ratio, ensuring responsive media sizing while maintaining layout integrity.
The columns utility defines the number of equal-width columns in a container, facilitating complex grid layouts and responsive designs.
The break-after utilities manage page break behavior after elements, ensuring controlled content flow when printing complex documents or reports.
The break-before utilities control page-break behavior before elements, ideal for printing or dividing content sections cleanly in layouts.
The break-inside utility manages item break behavior in multi-column containers, preventing unwanted column breaks for cleaner, organized layouts.
The Box Decoration Break utilities control box decoration behavior across lines in multi-line text, enhancing design flexibility and aesthetics.
The box-sizing utility configures element sizing to include padding and borders, ensuring consistent layout dimensions across responsive web designs.
The display utilities control element visibility, allowing for toggling between block, inline, and hidden states for responsive design.
The float utility manages element positioning by floating them left or right, facilitating responsive text wrapping and layout designs.
The clear utility manages elements' float clearing, ensuring proper layout structure by preventing wrapping issues caused by floated siblings.
The isolation utility manages stacking contexts, preventing element overlap issues, crucial for creating visually complex layouts without z-index conflicts.
The object-fit utility alters content fitting within containers, ensuring images or videos maintain aspect ratios without distortion when resizing.
The object-position utility precisely positions replaced elements within their container, commonly used for controlling images and videos alignment.
The overflow utility manages content overflow in containers, ensuring visibility or scrolling for clipped content, enhancing layout control and accessibility.
The overscroll behavior utility manages scroll boundary effects, preventing scroll chaining for improved control over nested scrollable elements.
The position utilities control element positioning with classes like static, relative, absolute, fixed, and sticky, allowing flexible layout adjustments.
The Top utility adjusts element's top position, enabling precise placement within containers for custom layouts and responsive designs. The Right utility modifies element's right position, allowing dynamic adjustment and alignment to achieve specific layout requirements. The Bottom utility sets element's bottom position, facilitating tailored positioning for improved control in aligning elements within layouts. The Left utility changes element's left position, offering flexibility to position elements accurately for various layout configurations.
The visibility utility manages element visibility, toggling between visible and hidden states to control element display in different contexts.
Z-Index utilities manage element stacking order in CSS, enhancing layout visibility and control in layered content scenarios.
