CSS Layouts

The CSS snippet collection contains utilities and interactive examples for CSS3. It includes modern techniques for creating commonly-used layouts, styling and animating elements, as well as snippets for handling user interactions.

  • Truncate text

    CSS, Layout

    Truncates text that is longer than one line, adding an ellipsis at the end ().

  • Evenly distributes child elements within a parent element.

  • Horizontally and vertically centers a child element within a parent element using flexbox.

  • Full-width image

    CSS, Layout

    Creates a full-width image.

  • Grid centering

    CSS, Layout

    Horizontally and vertically centers a child element within a parent element using grid.

  • Ensures that an element with variable width will retain a proportionate height value.

  • Learn everything you need to know about CSS units with this handy cheatsheet.

  • Vertically and horizontally centers a child element within its parent element, using display: table.

  • Vertically and horizontally centers a child element within its parent element using CSS transforms.