← Back to Module

CSS Flexbox and Grid

CMU422: Fundamentals of Web Design - Session 5

Birmingham Newman University

Lecturer: James Williams

Modern layout techniques for responsive design

3-hour session • 26 slides • 2 interactive tasks

Session Timeline:

  • 10 min: Registration & waiting
  • 20 min: Opening slides
  • 45 min: Task 1
  • 15 min: Break/Catch up
  • 20 min: Secondary slides
  • 45 min: Task 2
  • Remaining: Self-study

Learning Objectives

  • Understand CSS Flexbox layout system
  • Master CSS Grid for complex layouts
  • Create responsive and flexible designs
  • Combine Flexbox and Grid effectively
  • Build modern, accessible layouts

What is CSS Flexbox?

Flexbox is a one-dimensional layout method for arranging items in rows or columns
  • Designed for one-dimensional layouts
  • Automatically adjusts item sizes
  • Handles alignment and distribution
  • Great for navigation, forms, and card layouts
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Flexbox Container Properties

.flex-container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | flex-end | space-between;
  align-items: stretch | center | flex-start | flex-end;
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • flex-direction: Main axis direction
  • justify-content: Main axis alignment
  • align-items: Cross axis alignment
  • flex-wrap: Wrapping behavior

Flexbox Item Properties

.flex-item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  flex: 0 1 auto; /* shorthand */
  align-self: auto | flex-start | center | flex-end;
}
  • flex-grow: Growth factor
  • flex-shrink: Shrink factor
  • flex-basis: Initial size
  • align-self: Individual alignment

Common Flexbox Patterns

/* Navigation bar */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Card layout */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Try It: Layout Playground

1
2
3
4

Current CSS Properties:

display: flex

justify-content: flex-start

align-items: stretch

flex-direction: row

Switch between Flexbox and Grid, then adjust the properties to see how they affect the layout!

What is CSS Grid?

CSS Grid is a two-dimensional layout system for creating complex web layouts
  • Two-dimensional (rows and columns)
  • Precise control over layout
  • Great for overall page layouts
  • Works well with Flexbox
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

Grid Container Properties

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px 1fr 100px;
  grid-gap: 20px;
  justify-items: center;
  align-items: center;
}
  • grid-template-columns/rows: Define tracks
  • grid-gap: Spacing between items
  • justify-items/align-items: Item alignment

Grid Template Areas

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

Grid Item Properties

.grid-item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  justify-self: center;
  align-self: center;
}
  • grid-column/row: Item placement
  • justify-self/align-self: Individual alignment
  • Use line numbers or area names

Responsive Grid Layout

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Flexbox vs Grid: When to Use Each

Flexbox: One-dimensional layouts (rows OR columns)
  • Navigation menus
  • Form layouts
  • Card components
  • Toolbars
Grid: Two-dimensional layouts (rows AND columns)
  • Page layouts
  • Photo galleries
  • Dashboard layouts
  • Complex forms

Combining Flexbox and Grid

/* Grid for overall layout */
.page {
  display: grid;
  grid-template-areas: "header" "main" "footer";
}

/* Flexbox for navigation */
.nav {
  display: flex;
  justify-content: space-between;
}
  • Use Grid for overall page structure
  • Use Flexbox for component layouts
  • Grid items can be Flexbox containers
  • Flexbox items can be Grid containers

Browser Support

  • Flexbox: Excellent support in all modern browsers
  • Grid: Good support in modern browsers
  • Use fallbacks for older browsers
  • Test across different browsers
  • Consider using CSS Grid polyfills
Progressive Enhancement: Start with basic layouts, enhance with modern features

Performance Considerations

  • Grid and Flexbox are hardware accelerated
  • Avoid excessive nesting
  • Use appropriate units (fr, %, auto)
  • Minimize layout recalculations
  • Test on mobile devices
/* Good: Use fr units for flexible layouts */
grid-template-columns: 1fr 2fr 1fr;

/* Avoid: Fixed pixel values for responsive layouts */
grid-template-columns: 200px 400px 200px;

Accessibility Best Practices

  • Maintain logical document flow
  • Use semantic HTML elements
  • Ensure keyboard navigation works
  • Test with screen readers
  • Provide fallbacks for older browsers
  • Use appropriate ARIA attributes
Remember: Layout should enhance, not hinder, accessibility

Common Layout Patterns

  • Holy Grail Layout: Header, footer, sidebar, main content
  • Card Layout: Flexible cards in a grid
  • Sticky Footer: Footer at bottom of viewport
  • Sidebar Layout: Fixed sidebar with scrollable main
  • Masonry Layout: Pinterest-style grid
  • Dashboard: Multiple widgets in grid

Task 1: Flexbox Layout Practice

Instructions:

  1. Create a new HTML file called flexbox-practice.html
  2. Build a navigation bar using Flexbox with:
    • Logo on the left
    • Navigation links in the center
    • User menu on the right
  3. Create a card layout with:
    • 3 cards in a row (responsive)
    • Cards with image, title, description, and button
    • Equal height cards
  4. Add a footer with social media links
  5. Make it responsive for mobile devices

Time: 45 minutes

This task will help you understand Flexbox layout and responsive design

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

Grid Best Practices

  • Plan your grid structure before coding
  • Use semantic names for grid areas
  • Keep grid definitions simple
  • Use appropriate units (fr, %, auto)
  • Test on different screen sizes
  • Consider mobile-first approach
/* Good: Named grid areas */
grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

Auto-Fit vs Auto-Fill

/* Auto-fit: Creates as many columns as can fit */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* Auto-fill: Creates as many columns as possible */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  • auto-fit: Expands columns to fill space
  • auto-fill: Keeps minimum column width
  • Great for responsive card layouts
  • No media queries needed

CSS Subgrid (Future Feature)

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}
  • Allows nested grids to align with parent
  • Currently limited browser support
  • Will simplify complex layouts
  • Use with feature detection

Layout Debugging Tools

  • Browser Developer Tools
  • Grid and Flexbox inspectors
  • Layout visualization
  • CSS Grid Garden (learning tool)
  • Flexbox Froggy (learning tool)
  • Grid by Example (resources)
Chrome DevTools: Highlight grid areas and flex items

Task 2: CSS Grid Dashboard

Instructions:

  1. Create a new HTML file called grid-dashboard.html
  2. Build a dashboard layout using CSS Grid with:
    • Header: Full width, contains title and user info
    • Sidebar: Navigation menu with multiple items
    • Main Content: Grid of widgets/cards
    • Widgets: Statistics, charts, recent activity
  3. Use grid-template-areas for layout
  4. Make widgets responsive (different sizes)
  5. Add hover effects and transitions
  6. Ensure the layout works on different screen sizes

Time: 45 minutes

This task will help you understand CSS Grid and complex layouts

Common Layout Issues

  • Items not aligning: Check justify/align properties
  • Grid not working: Verify display: grid
  • Responsive issues: Use appropriate units
  • Browser differences: Test across browsers
  • Performance problems: Avoid excessive nesting
  • Accessibility issues: Maintain logical flow

Session Summary

  • Flexbox for one-dimensional layouts
  • Grid for two-dimensional layouts
  • Combine both for complex designs
  • Use responsive units and techniques
  • Test across different browsers
  • Consider accessibility and performance

Next Session:

JavaScript Basics - Adding interactivity to your layouts