CSS Grid

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.

1. Grid: what is it? Why is it here?
2. What is it good for?
   1. multidimensional
   2. break out of the document structure
   3. it’s smart…
3. Examples of it
4. Just setting grid… what happens by default?
5. basic grid and 50% / and 1fr
6. General terminology
7. 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/

Things I’ve Learned About CSS Grid Layout

https://brandonbrule.com/css-grid.html

OUR writeup —

https://docs.google.com/document/d/13vWoy50t2CwERA9HgKBObNsMv0sd0E6PQH29l90qFG4/edit