The easiest way to get started with CSS Grid
A simple, straightforward guide to CSS Grid using grid-template-areas property.
A simple, straightforward guide to CSS Grid using grid-template-areas property to visually set the grid structure. It will give you the confidence to start using CSS Grid comfortably while understanding the basics of creating grid layouts.
Course Mastering Prettier & Stylelint
Chapters
- 00:00 Intro
- 00:36 How grid-template-areas property works
- 03:49 How to adjust the size of grid rows using grid-template-rows property
- 04:52 How fraction unit (fr) works
- 06:43 How to specify columns using grid-template-areas
- 08:47 How to change grid column size using grid-template-columns property
- 09:33 How to specify space between rows and columns using grid-gap property
- 10:14 How to create empty cells in CSS Grid using grid-template-areas property
- 11:28 Quick recap
