Главная
Study mode:
on
1
Intro
2
Welcome
3
Setup & Starter Code Review
4
Quickest way to apply a grid
5
grid-template-columns
6
grid-auto-rows
7
grid-template-rows, grid-auto-columns
8
row-gap, column-gap, gap
9
grid-column-start & end, grid-row-start & end
10
Viewing your grid in dev tools
11
grid-column, grid-row shorthand
12
align-content, justify-content, place-content
13
Adding HTML for grid-template-areas
14
grid-template-areas, grid-area
15
Experimenting with layout properties
16
CSS Grid Garden
Description:
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.

CSS Grid Intro and Basic Layout Tutorial for Beginners

Dave Gray
Add to list
0:00 / 0:00