- [[CSS flexbox]], [[responsive web design]], [[CSS grid practical guide]], [[Rachel Andrew]], [[Morten Rand-Hendriksen]], [[holy grail layout]] # Idea Problem: Prior to CSS grid, tools for web layout are **content-out** and **one-dimensional**. With [[CSS flexbox]], we use `float` and `flex` as hacks to position elements where we want. It's not good. CSS grid is content-in and two-dimensional. It is a highly powerful and flexible way to lay out content. It's considered the [[holy grail layout]]. ## Terminology - container - item - line - cell - track - cell - track - area - gap/gutter # References - [Mastering CSS Grid | Colt Steele](https://www.coltsteele.com/tutorials/mastering-css-grid) - [CSS Grid Layout - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) - [codecademy CSS grid cheatsheet](https://www.codecademy.com/learn/fscp-making-a-website-responsive/modules/fecp-learn-css-grid/cheatsheet) - [CSS grid vs flexbox vs bootstrap](https://blog.hubspot.com/website/css-grid-vs-flexbox) - [codecademy CSS grid tutorial](https://www.codecademy.com/courses/learn-intermediate-css/lessons/css-grid-essentials/exercises/introduction-to-grids) - [responsive CSS](https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/) - [Flavio bootcamp CSS grid](https://thejsbootcamp.com/x3xN8TBWumCO0j7ZgLef/14-css-grid/) - [CSS Grid Changes EVERYTHING - Amazing Presentation - YouTube](https://www.youtube.com/watch?v=7kVeCqQCxlk) - [WCEU2017: CSS Grid Changes Everything (About Web Layouts) - MOR10](https://mor10.com/wceu2017/) - [Mastering CSS Grid | Colt Steele](https://www.coltsteele.com/tutorials/mastering-css-grid)