Lesson 25: CSS Layout Fundamentals

Learn how to build modern page structures with containers, flexbox, grid, positioning, and responsive layout patterns.

What is CSS Layout?

CSS layout is the system that controls how elements are arranged on a page. It helps you decide whether items should stack vertically, sit side by side, fill rows and columns, stay fixed on screen, or adapt to smaller devices.

In real websites, good layout is what turns a collection of headings, paragraphs, images, and buttons into a professional homepage, blog, product page, dashboard, or portfolio.

Main idea: HTML gives structure, while CSS layout decides how that structure is positioned, aligned, spaced, and resized across the page.

Common CSS Layout Tools

Tool	Best For	Example
`display`	Basic flow and formatting	block, inline, inline-block
`flexbox`	One-dimensional layouts	navbars, rows, card groups
`grid`	Two-dimensional layouts	dashboards, galleries, full-page sections
`position`	Precise placement	sticky headers, badges, overlays
`media queries`	Responsive design	tablet and mobile adjustments

Containers, Width, and Spacing

Before using flexbox or grid, it is important to understand the base layout rules that control width and spacing. These include width, max-width, margin, padding, and box-sizing.

.page-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

Why this works

max-width keeps content readable on large screens, margin: 0 auto centers the container, and padding adds breathing room inside the layout.

Tip: Use max-width more often than a fixed width so layouts stay flexible on different screens.

Flexbox Layout

Flexbox is ideal when you want items arranged in a row or column. It is excellent for navigation bars, feature cards, buttons, pricing blocks, and aligned content sections.

.feature-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.feature-card {
    flex: 1 1 250px;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 10px;
}

Flexbox Demo

These cards automatically wrap when space becomes smaller.

Card One

Card Two

Card Three

Remember: Flexbox works best in one direction at a time, either row or column.

Grid Layout

CSS Grid is designed for layouts with both rows and columns. It is more powerful than flexbox for full-page structures, dashboards, image galleries, magazine layouts, and complex content arrangements.

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

Grid Demo

This layout automatically creates responsive columns.

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Use Grid when: you need a page section to behave like a matrix of rows and columns rather than a single row of items.

Positioning and Layering

The position property lets you place elements more precisely. Common values include relative, absolute, fixed, and sticky.

Value	Meaning	Common Use
`relative`	Moves relative to its normal position	Base for absolutely positioned children
`absolute`	Removed from normal flow	Badges, labels, overlays
`fixed`	Stays in the viewport	Floating buttons, fixed headers
`sticky`	Acts normal until scrolling threshold	Sticky navigation or sidebar

.badge-card {
    position: relative;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff9800;
    color: white;
    padding: 6px 10px;
    border-radius: 999px;
}

Responsive Layout with Media Queries

A layout should adapt to laptops, tablets, and phones. Media queries help you change columns, spacing, font sizes, or navigation structure based on screen width.

.two-column {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .two-column {
        grid-template-columns: 1fr;
    }
}

Practical Advice

Start with flexible widths instead of fixed pixel widths.
Use gap for spacing between layout items.
Test layouts on narrow screens early, not only at the end.
Combine flexbox and grid rather than forcing one tool to do everything.

Interactive Layout Switcher

This mini demo shows how the same content can behave differently as block, flex, or grid layout.

Section A

Section B

Section C

Key Takeaways

Use containers to control page width and alignment.

Use flexbox for rows, columns, alignment, and grouped items.

Use grid for more advanced two-dimensional layout structures.

Use media queries to adapt layouts for smaller screens.

Use positioning carefully for overlays, sticky elements, and special placement.

Previous Lesson Back to CSS Home