Layout with CSS

Objective

By the end of this lesson, you will:

• Understand the role of CSS in organizing page layout.
• Identify and apply key layout techniques: display, position, flexbox, and grid.
• Create a responsive layout using Flexbox or Grid.

Definition

• Layout: The arrangement of visual elements on a webpage—how text, images, and sections are organized.
• Flexbox: A layout model for distributing space along a single axis (horizontal or vertical).
• Grid: A powerful layout system for creating two-dimensional layouts (rows and columns).

Introduction

HTML gives your website structure, but CSS gives it form. Good layout design isn’t just about looking pretty—it’s about usability, readability, and responsive behavior across screen sizes.

With just a few CSS layout properties, you can go from a jumbled pile of content to a clean, responsive, and modern design.

Core Layout Tools in CSS

📐 1. display – The Foundation of Layout

The display property defines how elements behave in the layout flow.

div {
  display: block;   /* Default for <div> */
}
span {
  display: inline;  /* Default for <span> */
}

Common values:

• block
• inline
• inline-block
• none
• flex
• grid

🧲 2. Flexbox – One-Dimensional Layout

Use display: flex to align items horizontally or vertically.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Key properties:

• justify-content: aligns items horizontally
• align-items: aligns items vertically
• flex-direction: row (default) or column
• flex-wrap: wraps items when needed

Best for: Toolbars, navigation bars, cards, and lists.

🧮 3. Grid – Two-Dimensional Layout

Use display: grid to control rows and columns.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

Key properties:

• grid-template-columns: sets column widths
• grid-template-rows: sets row heights
• gap: spacing between grid items
• grid-column / grid-row: controls item span

Best for: Page templates, dashboards, galleries.

📍 4. position – Control Exact Placement

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

Values:

• static (default)
• relative
• absolute
• fixed
• sticky

Use carefully – best for specific use cases like modals, tooltips, or sticky headers.

🔄 5. Responsive Design with Media Queries

Make layouts adapt to screen size.

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Suggested Activities

🎯 Activity 1: Build a Flexbox Navigation Bar

Create a horizontal nav bar using Flexbox:

• Space items evenly
• Center them vertically

🎯 Activity 2: Create a Grid-Based Layout

Design a layout with:

• A header
• A sidebar
• A main content area
• A footer

Use grid-template-areas or manual row/column placement.

🎯 Activity 3: Responsive Card Deck

Use Flexbox to display a row of cards, then stack them vertically on small screens using a media query.

Reflection Questions

• Which layout method felt most intuitive: Flexbox or Grid?
• When might you choose absolute or fixed positioning?
• How does layout affect user experience across different devices?

Further Reading & Tools

📚 MDN: CSS Layout Techniques
📚 Flexbox Froggy – Gamified Flexbox practice
📚 Grid Garden – Gamified CSS Grid learning
🧪 CodePen – Live test your layouts

Lesson Wrap-Up

With tools like Flexbox, Grid, and positioning, CSS gives you full control over how your content flows and adapts. Choosing the right layout strategy helps your website feel organized, modern, and responsive.

✅ Action Step

Create a simple webpage layout using either Flexbox or Grid with at least 3 sections. Test it on different screen sizes or simulate mobile view in your browser.