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.

  • Responsive image mosaic

    Creates a responsive image mosaic.

    CSS, Layout · Dec 30, 2020

  • Menu on image hover

    Displays a menu overlay when the user hovers over the image.

    CSS, Layout · Oct 11, 2021

  • How can I ensure the footer is always at the bottom of the page?

    Make sure the footer stays at the bottom of the page, instead of floating up when the content is too short.

    CSS, Layout · Oct 30, 2022

  • CSS inherited properties cheatsheet

    A quick reference for inherited CSS properties.

    CSS, Layout · Nov 20, 2022

  • What are CSS variables and where can I use them?

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

    CSS, Visual · Sep 28, 2021

  • Offscreen

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

    CSS, Layout · Oct 11, 2021

  • Clearfix

    Ensures that an element self-clears its children.

    CSS, Layout · Dec 30, 2020

  • 3-tile layout

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

    CSS, Layout · Dec 30, 2020

  • 4 ways to center content with CSS

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

    CSS, Layout · Sep 28, 2021

  • Masonry Layout

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

    CSS, Layout · Oct 13, 2021

  • Flexbox Cheat Sheet

    Flexbox allows you to create fluid layouts easily. If you are constantly looking up how it works, this handy cheatsheet is all you need.

    CSS, Layout · Jun 12, 2021

  • Fit image in container

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

    CSS, Layout · Dec 30, 2020

  • Truncate multiline text

    Truncates text that is longer than one line.

    CSS, Layout · Jan 7, 2021

  • Box-sizing reset

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

    CSS, Layout · Dec 30, 2020

  • Responsive layout with sidebar

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

    CSS, Layout · Sep 16, 2020

12