Learn CSS Grid - A 13 Minute Deep Dive

🚨🚨🚨 COURSES - https://slayingthedragon.io 🚨🚨🚨

Discord - https://discord.gg/Ccz9nQSfQB

Source code: https://github.com/RamziBach/Learn-CSS-Grid---A-13-Minute-Deep-Dive

Grids are two dimensional, I can place things on it horizontally, vertically and both simultaneously. Actually I can position items in any way I want, even stacked. Each number represents a line, these lines are row lines and these lines are column lines. Our grid is made up of cells, each square is a cell. And finally, our grid is also made up of tracks, these are the rows and these are the columns.

0:00 Intro

0:24 Creating a grid

0:45 grid-template-rows & columns

1:17 Positioning Items

1:48 grid-row & grid-column

2:10 span keyword

3:01 grid-area

3:29 Negative numbers

3:45 Layering items

4:32 grid-auto-rows

5:29 grid-auto-flow

5:40 grid-auto-column

5:51 Fractional units

6:43 minmax()

7:10 repeat()

7:39 grid-gap

7:53 grid-template-areas

9:55 justify-items & align-items

10:53 justify-self & align-self

11:20 justify-content & align-content

12:20 auto-fit