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 user hovers over the image.

  • Creates a responsive image mosaic.

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

  • Offscreen

    CSS, Layout

    Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.

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

  • 3-tile layout

    CSS, Layout

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

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

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

  • The CSS selectors used to target the root element of an HTML share some similarities, but they also have some differences.

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