Welcome to CSS Grid

Using GitHub Codespaces with this course

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

When to use Grid

Drawing layouts with pen and paper

Using Grid generators

Mobile-first approach

Accessibility considerations

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

What you're creating A full-bleed layout

Overview of the starting point

Create the shared grid

Define columns and position grid items

What you're creating A uniform card layout

Overview of card markup and starter styles

Define the main grid

Create grid for each card

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

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

Next steps