#Layout

7 snippets

• CSS

  CSS-only scroll-snap carousel

  A horizontally scrolling gallery that snaps to each card, with no JavaScript.

• CSS

  Header, sidebar, main and footer layout with grid

  A full-height page layout with a sticky footer using grid-template-areas.

• CSS

  Center anything with grid

  Center an element horizontally and vertically using two lines of CSS.

• CSS

  Keep media at a fixed aspect ratio

  Reserve space for videos and images with aspect-ratio so the page does not jump while loading.

• CSS

  Responsive card grid without media queries

  Use CSS Grid with repeat(auto-fit, minmax()) so cards wrap automatically at any width.

• CSS

  Truncate text with an ellipsis (single and multi-line)

  Clip long text to one line or N lines with an ellipsis using text-overflow and line-clamp.

• CSS

  Dark mode with CSS custom properties and color-scheme

  Switch themes by redefining variables under prefers-color-scheme, with a manual override attribute.