CSS Grid
Introduction
Intro outline
What can you do with grid?
You may have already been using this snippet … but now it’s time to learn all of the things – and how that snippet works.
- Grid: what is it? Why is it here?
- What is it good for?
- multidimensional
- break out of the document structure
- it’s smart…
- Examples of it
- Just setting grid… what happens by default?
- basic grid and 50% / and 1fr
- General terminology
- columns, rows, lines, tracks, cells,
https://www.youtube.com/watch?v=t0b3uBoDkBs
The Story of CSS Grid, from Its Creators by Aaron Gustafson (October 19, 2017)
“Designing with Grid” by Jen Simmons – An Event Apart Denver (2017)
“Designing Intrinsic Layouts” by Jen Simmons—An Event Apart video (2020)
Layout land (Jen Simmons YouTube)
https://css-irl.info/controlling-leftover-grid-items/
https://robleto.medium.com/jumping-into-css-grid-9912b48cd44e
https://yoksel.github.io/grid-cheatsheet/
https://v6.robweychert.com/blog/2018/11/css-grid-editorial-layouts/
https://brandonbrule.com/css-grid.html
OUR writeup —
https://docs.google.com/document/d/13vWoy50t2CwERA9HgKBObNsMv0sd0E6PQH29l90qFG4/edit