CSS Grid Intro and Basic Layout Tutorial for Beginners

CSS Grid Intro and Basic Layout Tutorial for Beginners

Dave Gray via YouTube Direct link

Adding HTML for grid-template-areas

13 of 16

13 of 16

Adding HTML for grid-template-areas

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

CSS Grid Intro and Basic Layout Tutorial for Beginners

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Intro
  2. 2 Welcome
  3. 3 Setup & Starter Code Review
  4. 4 Quickest way to apply a grid
  5. 5 grid-template-columns
  6. 6 grid-auto-rows
  7. 7 grid-template-rows, grid-auto-columns
  8. 8 row-gap, column-gap, gap
  9. 9 grid-column-start & end, grid-row-start & end
  10. 10 Viewing your grid in dev tools
  11. 11 grid-column, grid-row shorthand
  12. 12 align-content, justify-content, place-content
  13. 13 Adding HTML for grid-template-areas
  14. 14 grid-template-areas, grid-area
  15. 15 Experimenting with layout properties
  16. 16 CSS Grid Garden

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.