CSS Grid

Transcript

1. C S S G R I D
2. C S S G R I D V S F L E X B O X
3. Flexbox is for one dimensional layout. A row OR a column. CSS Grid is for two dimensional layout. Rows AND columns.
4. S H O W M E T H E C O D E F L E X B O X C S S G R I D /
5. C S S G R I D ❤ F L E X B O X
6. S H O W M E T H E C O D E C S S G R I D ❤ F L E X B O X
7. B A S I C S C S S G R I D - B A S I C S
8. C O N C E P T S grid track grid track grid area grid cell grid line grid line
9. F E A T U R E S
10. N A M E D A R E A S C S S G R I D - N A M E D A R E A S
11. U N I T F R C S S G R I D - U N I T F R
12. D E S I G N ( E R S )
13. C A U T I O N …
14. C O M P A T I B I L I T Y
15. R E A C T N A T I V E
16. Q U E S T I O N S ?
17. R E F E R E N C E S • https://gridbyexample.com/ (Rachel Andrew) • Layout land (Jen Simmon) • https://labs.jensimmons.com/ • http://cssgridgarden.com/ • https://drafts.csswg.org/css-grid-1/
18. T H A N K S ! leoaraujocosta Leonardo de Araujo Costa @leoaraujocosta