Website Layout Basics

Website Layout Basics: Build a Complete Page Layout with CSS

Focus keyword: website layout basics. A website layout is the structure that organises content into header, navigation, main content, sidebar and footer. In this lesson you will combine everything from this chapter (display, position, z-index, centering and media) with flexbox and grid to build a clean, responsive, accessible page layout. All examples are live, so edit them and resize the preview.

Trending keywords covered in this lesson

CSS layout tutorial, responsive web design, mobile-first CSS, CSS grid layout, grid-template-areas, flexbox navigation, holy grail layout, sticky footer, semantic HTML5 layout, max-width container, box-sizing border-box, clamp() fluid spacing, media queries, container queries, auto-fit minmax, CSS gap, logical properties, dvh, accessibility landmarks, skip link.

1. Start with Semantic HTML

Use meaningful elements. They give structure to search engines and assistive technology (landmarks):

• header: site or section heading area (logo, title).
• nav: main navigation links.
• main: the unique main content (one per page).
• article and section: self-contained content and thematic groups.
• aside: sidebar or related content.
• footer: copyright, links, contact.

Add a skip link at the top (a href='#main') so keyboard users can jump past the navigation.

2. Global Reset for Layout

Start every project with a small reset:

• *, *::before, *::after { box-sizing: border-box; } so padding and border are included in width.
• body { margin: 0; }
• img, video { max-width: 100%; height: auto; display: block; }
• A readable base: font: 1rem/1.6 system-ui, sans-serif;

3. The Container Pattern

Text that runs across a huge screen is hard to read. Limit width and center the content: .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }. The min() function gives a 1rem side gap on small screens and stops at 1100px on large screens. Keep paragraphs around 60 to 75 characters wide using max-width: 65ch.

4. Choosing the Right Layout Tool

• Normal flow: default stacking of blocks, perfect for articles.
• Flexbox: one dimension (rows or columns). Use for navbars, button groups, cards content and centering.
• Grid: two dimensions. Use for page skeletons, galleries and dashboards.
• Position: small adjustments, overlays, badges and sticky elements.
• Float: only for text wrap.

5. Page Skeleton with CSS Grid Areas

Name your regions with grid-template-areas and assign them using grid-area. It is readable and easy to change for each breakpoint. A classic holy grail layout (header, sidebar, content, footer) takes only a few lines. On small screens show a single column, then on wider screens define two columns.

6. Sticky Footer

To keep the footer at the bottom on short pages, make the body a grid or flex column with min-height: 100dvh, and let the main area grow. With grid use grid-template-rows: auto 1fr auto. With flex use flex: 1 on main.

7. Navigation Bar with Flexbox

Use display: flex; align-items: center; gap: 1rem; on the nav list, remove bullets, and push the last item away with margin-left: auto. Wrap links on small screens with flex-wrap: wrap. Keep tap targets at least 44px tall. Make the header sticky with position: sticky; top: 0; and a z-index from your scale.

8. Responsive Design: Mobile First

Write the small screen styles first and add complexity with min-width media queries. Add meta name='viewport' content='width=device-width, initial-scale=1' in the HTML head, otherwise mobile browsers zoom out and your layout will not respond. Common breakpoints: 600px (large phone), 900px (tablet), 1200px (desktop), but let your content decide when to break.

Fluid techniques that reduce media queries

• repeat(auto-fit, minmax(240px, 1fr)) builds a card grid that wraps by itself.
• clamp(1rem, 2vw + 0.5rem, 1.5rem) creates fluid font sizes and spacing.
• flex-wrap: wrap with flex: 1 1 240px on items.
• Container queries (container-type: inline-size and @container) let a component adapt to its parent width instead of the viewport.

9. Spacing System

Use a consistent scale with custom properties such as --space-1: .25rem, --space-2: .5rem, --space-3: 1rem, --space-4: 2rem, --space-5: 4rem. Use gap instead of margins between siblings, and padding-block for vertical section spacing.

10. Layout Accessibility Checklist

• Use landmarks (header, nav, main, aside, footer) and only one main.
• Keep DOM order equal to the visual order.
• Provide a visible focus style and a skip link.
• Do not disable zoom, and use rem and relative units.
• Check contrast and test with the keyboard only.
• Respect prefers-reduced-motion for animations.

11. Build Order Workflow

1. Write semantic HTML with no CSS and check the reading order.
2. Add the reset, typography and the container.
3. Build the mobile layout in a single column.
4. Add the grid or flex skeleton at the first breakpoint.
5. Polish components: navbar, cards, buttons and footer.
6. Test on real devices, zoom and keyboard.

12. Common Mistakes

• Forgetting the viewport meta tag.
• Using fixed pixel widths that overflow on phones.
• Using tables or floats for page layout.
• Nesting too many wrappers (div soup).
• Using height: 100vh for full-page sections and cutting content on mobile (use min-height with dvh).
• Adding horizontal scroll by using width: 100vw together with a vertical scrollbar.

Key Takeaways

Start with semantic HTML, reset box sizing, constrain the width with a container, use grid for the page skeleton and flexbox for components, build mobile first, and rely on fluid techniques like auto-fit and clamp. Good layouts are simple, accessible and flexible.