Page-level layout patterns you can drop into a real site: a split hero, the holy grail page structure, a bento feature grid, a card grid that picks its own column count, a sticky footer and a split-screen sign-in. Each is responsive and built with modern CSS Grid or Flexbox, with no framework.
A landing-page hero with the headline, supporting text and two actions on one side and a visual panel on the other. It is a two-column grid that collapses to a single column on narrow screens with one media query, and the heading size scales smoothly with clamp() so it never overflows a phone.
View code
<section class="ttl-hero">
<div class="ttl-hero-copy">
<p class="ttl-eyebrow">New · Spring collection</p>
<h1>Furniture that fits small spaces</h1>
<p>Compact desks, shelves and storage built from solid oak. Free delivery on orders over $80.</p>
<div class="ttl-hero-ctas"><a href="#" class="is-primary">Shop the range</a><a href="#">Book a room plan</a></div>
</div>
<div class="ttl-hero-art" aria-hidden="true"></div>
</section>
The classic page structure: header, navigation sidebar, main content, an aside and a footer, built with CSS Grid template areas. The layout is readable straight from the CSS, the footer stays at the bottom even with little content, and it stacks into one column on small screens by redefining the areas.
A feature section in the bento style: tiles of different sizes packed into one grid, like compartments in a lunch box. Large tiles span two columns or two rows with grid-column and grid-row, and grid-auto-flow: dense fills the gaps. Below 560px every tile becomes full width.
View code
<section class="ttl-bento">
<article class="is-wide"><h3>Live inventory</h3><p>Stock levels sync across every channel.</p></article>
<article class="is-tall"><h3>Fast checkout</h3><p>One page, three fields.</p></article>
<article><h3>Reports</h3><p>Daily sales by email.</p></article>
<article><h3>Discounts</h3><p>Rules, not spreadsheets.</p></article>
<article class="is-wide"><h3>Integrations</h3><p>Shopify, Amazon and your accounting tool.</p></article>
</section>
A product or blog grid that decides its own number of columns. repeat(auto-fill, minmax(160px, 1fr)) fits as many columns as there is room for, each at least 160px wide, so the same CSS gives one column on a phone and five on a wide monitor. Resize the editor preview to watch it reflow.
Keeps the footer at the bottom of the window when a page has little content, and below the content when it has a lot. The page is a flex column with a minimum height of the viewport, and the main area takes the spare space with flex: 1. No fixed heights or absolute positioning needed.
A two-panel sign-in screen: a brand panel with a short message on the left and the form on the right. The form has real labels, sensible autocomplete values and a 44px tall button. On phones the brand panel shrinks to a header above the form instead of disappearing.
Most page layouts are two-dimensional: rows and columns both matter, which is what CSS Grid is for. Flexbox is better for one direction at a time, such as a row of buttons or a header bar. These demos use grid for the overall structure and flexbox inside components, the combination most production sites use.
Responsive without many media queries
Modern CSS can adapt on its own. repeat(auto-fill, minmax(160px, 1fr)) chooses the column count, clamp() scales headings between a minimum and maximum, and flex-wrap lets rows break naturally. The demos add a single media query only where the layout truly changes shape.
Named areas are readable
grid-template-areas lets you draw the layout in the CSS as text, as in the holy grail demo. Anyone reading the stylesheet can see the structure at a glance, and changing the layout for phones means rewriting a few quoted strings instead of repositioning every element.
Keep source order logical
Grid and flexbox can place elements anywhere visually, but screen readers and keyboard users follow the HTML order. Keep the markup in a sensible reading order and use visual reordering, such as moving the hero image above the text on phones, only for small adjustments.
Frequently asked questions
Do these layouts need a framework?
No. They are plain HTML and CSS and work in every current browser.
How do I use a layout on a real page?
Copy the HTML and CSS, then replace the placeholder content. Where a demo uses a fixed height for the preview, the CSS comment shows what to use on a real page, such as min-height: 100dvh.
Can I combine them?
Yes. The split hero, the card grid and the sticky footer are designed to sit together on one page.