|
9 | 9 |
|
10 | 10 | - [História do CSS Layout](https://www.youtube.com/watch?v=94aYg5D8N0s&t=58s) |
11 | 11 | - [O que é CSS Grid Layout](https://www.w3.org/TR/css-grid-1/) |
12 | | -- [CSS Grid Layout x Flexbox]() |
| 12 | +- [CSS Grid Layout x Flexbox](https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/) |
13 | 13 | - [Terminologia](https://codepen.io/simoneas02/post/grid-layout) |
14 | 14 | - Grid Lines |
15 | 15 | - Grid Track |
16 | 16 | - Grid Cell |
17 | 17 | - Grid Area |
18 | 18 | <hr> |
19 | 19 |
|
20 | | -## [Collection Workshop](bit.ly/css-grid-layouts) |
| 20 | +## [Collection Workshop](https://codepen.io/collection/AdOVGW/) |
21 | 21 |
|
22 | | -### [01 - Definindo um Grid](bit.ly/01-definindo-grid) |
| 22 | +### [01 - Definindo um Grid](https://codepen.io/simoneas02/pen/gRRLRb) |
23 | 23 |
|
24 | 24 | ```CSS |
25 | 25 | display: grid |
26 | 26 | display: inline-grid |
27 | 27 | ``` |
28 | 28 |
|
29 | | -### [02 - Line Base Placement](bit.ly/02-placement) |
| 29 | +### [02 - Line Base Placement](https://codepen.io/simoneas02/pen/qjjqyw) |
30 | 30 |
|
31 | 31 | ```CSS |
32 | 32 | grid-template-columns: 50px 100px 200px; |
33 | 33 | grid-template-rows: 100px 150px; |
34 | 34 | ``` |
35 | 35 |
|
36 | | -### [03 - Line Base Position](bit.ly/03-position) |
| 36 | +### [03 - Line Base Position](https://codepen.io/simoneas02/pen/LLLbXK) |
37 | 37 |
|
38 | 38 | ```CSS |
39 | 39 | .e { |
|
44 | 44 | } |
45 | 45 | ``` |
46 | 46 |
|
47 | | -### [04 - Line Base Position - Shorthands](bit.ly/04-position-shorthands) |
| 47 | +### [04 - Line Base Position - Shorthands](https://codepen.io/simoneas02/pen/BZZQeW) |
48 | 48 |
|
49 | 49 | ```CSS |
50 | 50 | .e { |
|
57 | 57 | } |
58 | 58 | ``` |
59 | 59 |
|
60 | | -### [05 - Grid Gap](bit.ly/05-grid-gap) |
| 60 | +### [05 - Grid Gap](https://codepen.io/simoneas02/pen/GEEror) |
61 | 61 |
|
62 | 62 | ```CSS |
63 | 63 | grid-column-gap: 10px; |
|
68 | 68 | grid-gap: 20px; |
69 | 69 | ``` |
70 | 70 |
|
71 | | -- [06 - Area Naming](bit.ly/06-area-naming) |
| 71 | +### [06 - Area Naming](https://codepen.io/simoneas02/pen/LLLxLp) |
72 | 72 |
|
73 | 73 | ```CSS |
74 | 74 | grid-template-areas: |
|
111 | 111 | ``` |
112 | 112 | <hr> |
113 | 113 |
|
114 | | -- [Hands On - YouTube Layout ]() |
| 114 | +- [Hands On - YouTube Layout ](https://github.com/simoneas02/youtube-css-grid/tree/master/training) |
115 | 115 | - [Suporte](https://caniuse.com/#feat=css-grid) |
116 | 116 | - [Quer saber mais](https://github.com/simoneas02/awesome-grid-layout) |
0 commit comments