Layout Snippets — Free HTML CSS JS Page Layout Components

Layout components define the visual structure of a page — how content is arranged, how sections relate to each other, and how the design responds across screen sizes. Getting layout right is the difference between a page that communicates clearly and one that feels cluttered or broken on mobile. This collection covers 11 of the most commonly needed page sections and structural patterns.

Every snippet is plain HTML and CSS — most need zero JavaScript. Each demonstrates a real CSS technique that applies in any project.

Hero Section uses a radial-gradient glow effect centred on the page as a visual focal point. The headline uses clamp(28px, 5vw, 56px) for fluid type sizing that scales between a minimum and maximum without media queries. Two CTAs — a filled primary and an outlined secondary — cover the standard hero action pattern.

CSS Grid Cards layout uses grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)). This single rule creates a fully responsive grid: the browser calculates how many 220px minimum columns fit the container width and fills the remaining space with 1fr. On a wide desktop this produces 4–5 columns; on mobile, 1 column. No media queries, no JavaScript resize handler.

Bento Grid mimics the Apple-style mixed-size grid layout. Some cells use grid-column: span 2 to occupy double width. Others span two rows. The overall layout uses gap: 12px and a dark background. Hover states add an accent border glow to individual cells.

Split Hero uses display: grid; grid-template-columns: 1fr 1fr to place copy on the left and a terminal code panel on the right. The code panel uses a dark background with syntax-coloured text (CSS spans for keywords, strings, and comments) — no syntax highlighting library.

Vertical Timeline uses a ::before pseudo-element on the timeline container as the vertical line. The line uses a linear-gradient from accent to transparent so it fades out at the bottom. Each node has done (filled checkmark), active (pulsing accent), and pending (grey) states.

Image Comparison uses clip-path: inset(0 X% 0 0) on the "after" image, where X is the drag position as a percentage. Dragging the handle updates X via a mousemove handler that reads clientX relative to the container. Touch events use e.touches[0].clientX. The percentage is clamped between 2 and 98 to prevent the before/after images from fully disappearing.

Masonry Grid uses CSS columns: 3 and break-inside: avoid. Children fill top-to-bottom in columns and the browser handles variable height items automatically — no JavaScript height calculation needed. This is browser-native masonry layout.

Chat UI, Empty State, 404 Page, and Pricing Toggle complete the collection with the remaining essential layout patterns.