Master CSS Grid in this comprehensive tutorial to simplify website layouts. Learn core concepts through hands-on projects, including building a website layout and an image grid. Explore advanced topics like named lines, content alignment, and the differences between Grid and Flexbox. Create powerful, responsive designs with improved HTML and CSS structure while gaining greater control over your layouts. Perfect for beginners and intermediate developers looking to enhance their web design skills.
Overview
Syllabus
1. Course Introduction.
2. Your first grid.
3. Fraction units and repeat.
4. Positioning items.
5. Template areas.
6. Auto-fit and minmax.
7. Implicit rows.
8. An awesome image grid.
9. Bonus: Named Lines.
10. Bonus: Justify-content and align-content.
11. Bonus: Justify-items and align-items.
12. Bonus: Auto-fit vs. auto-fill.
13. Bonus: Creating an article layout.
14. Bonus: Grid vs. Flexbox.
Taught by
freeCodeCamp.org
