CSS Grid — Roadmap Step & Resources
Two-dimensional layouts with grid: grid-template-columns/rows, grid-areas, gap
- Level: beginner
- Estimated time: 2 days
- Roadmap: Vue.js Stack
Before this step
Mini projects
- Build a photo gallery layout with CSS Grid
Interview questions
- How does grid-template-areas simplify layout?
Study resources
- Learn CSS Grid in 20 Minutes (Video) — Web Dev Simplified's comprehensive but fast walkthrough of grid-template-columns, areas and gaps.
- A Complete Guide to CSS Grid (Article) — CSS-Tricks' equally legendary companion reference guide to the Flexbox one, covering every Grid property.
- Basic Concepts of CSS Grid (Article) — MDN guide explaining grid containers, tracks, template-areas, lines, and minmax functions.
- CSS Grid Garden Game (Article) — Interactive game that teaches CSS Grid syntax and track coordinates hands-on.
Part of
- CSS — section
- Vue.js Stack roadmap — the full learning path