Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

CSS: Advanced Layouts with Grid

via LinkedIn Learning

Write review

Overview

Build a Learning Habit
Download Class Central's free printable study calendar
Download for Free
Learn how to take full advantage of the capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive.

Syllabus

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

Taught by

Morten Rand-Hendriksen

Reviews

4.8 rating at LinkedIn Learning based on 34 ratings

Start your review of CSS: Advanced Layouts with Grid

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.