Results for “layout”
Small, practical examples. Search by task or narrow things down below.
Enforce a minimum width
CSS: Min-width can prevent a declared smaller width from taking effect.
CSS✓ Tested
Fade an entire element and its descendants
CSS: Opacity applies to the rendered element as a group, including child text.
CSS✓ Tested
Fill an earlier grid hole with a later small item
CSS: Dense auto-placement may move a later item visually ahead of other items to fill a gap.
CSS✓ Tested
Fill grid rows before moving to the next column
CSS: Column auto-flow fills the explicitly declared rows in each successive implicit column.
CSS✓ Tested
Fit an entire image inside a differently shaped box
CSS: Contain preserves the image aspect ratio while keeping all of it visible inside the specified content box.
CSS✓ Tested
Fit as many columns as possible
Use auto-fit and minmax for a CSS grid that responds to its available width.
CSS✓ Tested
Give an element a background
CSS: Learn how to give an element a background in a complete browser example.
CSS✓ Tested
Give an item the remaining horizontal space
CSS: A growing flex item absorbs free space after fixed items have been sized.
CSS✓ Tested
Give implicit grid rows a minimum height
CSS: Minmax allows an implicit row to grow when its content requires more room.
CSS✓ Tested
Hide an element while keeping its space
CSS: Visibility hidden preserves layout geometry even though the element is not painted.
CSS✓ Tested
Highlight a group containing keyboard focus
CSS: Focus-within matches a parent when any descendant has focus.
CSS✓ Tested
Include padding in an element’s width
CSS: Learn how to include padding in an element’s width in a complete browser example.
CSS✓ Tested