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.

  • Aspect ratio

    CSS, Layout

    Creates a responsive container with a specified aspect ratio.

  • Box-sizing reset

    CSS, Layout

    Resets the box-model so that width and height are not affected by border or padding.

  • Creates a responsive layout with a content area and a sidebar.

  • Limit multiline text to a given number of lines.

  • 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.