Results for “layout”
Small, practical examples. Search by task or narrow things down below.
Make keyboard focus visible
CSS: Learn how to make keyboard focus visible in a complete browser example.
CSS✓ Tested
Override cross-axis alignment for one item
CSS: Align-self changes one item without changing its siblings’ alignment.
CSS✓ Tested
Paint a gradient without an image file
CSS: Linear-gradient generates a CSS background image from color stops.
CSS✓ Tested
Place fixed-size boxes on the same line
CSS: Inline-block allows dimensions while participating in inline layout.
CSS✓ Tested
Position a badge relative to its container
CSS: A positioned ancestor establishes the containing block for an absolutely positioned child.
CSS✓ Tested
Position an item from the writing direction’s start edge
CSS: Logical insets follow direction, so inline-start is the right side in this RTL container.
CSS✓ Tested
Preserve an aspect ratio
Reserve a 16:9 CSS box without a fixed height.
CSS✓ Tested
Preserve line breaks while collapsing repeated spaces
CSS: Pre-line retains newlines but does not preserve all whitespace like pre-wrap does.
CSS✓ Tested
Preserve whitespace while wrapping
Use CSS pre-wrap for multiline text that retains spaces.
CSS✓ Tested
Prevent an item from shrinking
CSS: Flex-shrink zero preserves a required size even when the container overflows.
CSS✓ Tested
Provide a fallback for an unset custom property
CSS: The second var argument supplies a value when the custom property is unavailable.
CSS✓ Tested
Push flex items to opposite ends
CSS: Space-between distributes free main-axis space between items.
CSS✓ Tested