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.

  • Displays a menu overlay when the image is hovered.

  • Creates a responsive image mosaic.

  • Centering content with CSS might often feel tricky. Here are 4 easy tricks you can use in your code today.

  • Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs.

  • Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.

  • Offscreen

    CSS, Layout

    Completely hides an element visually and positionally in the DOM while still allowing it to be accessible.

  • 3-tile layout

    CSS, Layout

    Aligns items horizontally using display: inline-block to create a 3-tile layout.

  • Clearfix

    CSS, Layout

    Ensures that an element self-clears its children.

  • Masonry Layout

    CSS, Layout

    Creates a masonry-style layout that is especially useful when working with images.

  • Truncates text that is longer than one line.

  • Fits an positions an image appropriately inside its container while preserving its aspect ratio.

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

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

  • Box-sizing reset

    CSS, Layout

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

  • Evenly distributes child elements within a parent element.