CSS Grid Intro and Basic Layout Tutorial for Beginners
Offered By: Dave Gray via YouTube
Course Description
Overview
Learn the fundamentals of CSS Grid in this beginner-friendly tutorial. Explore essential grid properties and create a basic layout using CSS Grid. Start with the quickest way to apply a grid, then dive into grid-template-columns, grid-auto-rows, and gap properties. Master grid positioning with grid-column and grid-row, and use dev tools to visualize your grid. Discover how to create complex layouts using grid-template-areas and experiment with various layout properties. Conclude by practicing your new skills with the interactive CSS Grid Garden game.
Syllabus
Intro
Welcome
Setup & Starter Code Review
Quickest way to apply a grid
grid-template-columns
grid-auto-rows
grid-template-rows, grid-auto-columns
row-gap, column-gap, gap
grid-column-start & end, grid-row-start & end
Viewing your grid in dev tools
grid-column, grid-row shorthand
align-content, justify-content, place-content
Adding HTML for grid-template-areas
grid-template-areas, grid-area
Experimenting with layout properties
CSS Grid Garden
Taught by
Dave Gray
Related Courses
Software as a ServiceUniversity of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX