CSS: Advanced Layouts with Grid

Introduction

• Welcome to CSS Grid
• What you should know
• Using GitHub Codespaces with this course

1. CSS Grid: Core Concepts

• What is CSS Grid?
• Grid terminology
• Create a grid
• Grid lines and units
• Placing grid items
• Grid areas
• Named grid lines
• Grid gap
• Grid alignment

2. Planning for Grid Layouts

• When to use Grid?
• Drawing layouts with pen and paper
• Using Grid generators
• Mobile-first approach
• Accessibility considerations

3. Multi-Column Layout

• What you're creating: A multi-column layout
• Overview of the starting point
• Create the main grid
• Manual grid item placement
• Add third column for wider viewports
• Justify the grid
• Bonus: Refactor using grid areas

4. Full-Bleed Layout

• What you're creating: A full-bleed layout
• Overview of the starting point
• Create the shared grid
• Define columns and position grid items

5. A Very Uniform Card Layout

• What you're creating: A uniform card layout
• Overview of card markup and starter styles
• Define the main grid
• Create grid for each card

6. A Variable Card Layout

• What you're creating: A variable card layout
• Overview of card markup
• Define the main grid
• Place cards on the grid
• Create grid for each card
• Position items within the card grid
• Make sure it's responsive

7. Asymmetrical or Broken Layout

• What you're creating: An asymmetrical layout
• Overview of the starting point
• Define the primary grid layout
• Create the first nested grid
• Create the second nested grid

Conclusion

• Next steps