CSS Flexbox and Grid

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?

• 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;
}

What is CSS Grid?

• 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

• Navigation menus
• Form layouts
• Card components
• Toolbars

• 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

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

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

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)

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