/CSS-Grid-Tutorial

Tutorial following Ohans Emmanuel's "How to Efficiently Master the Grid in a Jiffy", linked in Readme

Primary LanguageHTML

Tutorial on which this repo is based: Omans Emmanuel: https://medium.com/flexbox-and-grids/how-to-efficiently-master-the-css-grid-in-a-jiffy-585d0c213577

Website being emulated: http://output.jsbin.com/wubudog

Slides: https://docs.google.com/presentation/d/1nPLKlSg5iN2hQudjd9avX8fbu3VfFXtV3hHj_iUgJjU/edit?usp=sharing

Key Points:

When to use Grid:

It depends. You'll hear as an answer that flexbox is a one-dimensional system and grid is two-dimensional, but that alone doesn't help ME decide which to use. If you know exactly what layout you want on your page, top to bottom and left to right, you can use grid to make it. If you have some content to space along one axis, go ahead and use flexbox.

Media queries help, but grid is great at responsive layouts on its own.

Grid areas are better for responsive design

Good Resources:

Firefox Developer Edition Grid Tutorial: https://mozilladevelopers.github.io/playground/css-grid/
List of sites that use grid: https://cssgrid.design/
Rachel Andrew: https://gridbyexample.com/
Rachel Andrew: https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/
Jen Simmons: https://labs.jensimmons.com/
CSS-Tricks/Chris Coyier: https://css-tricks.com/snippets/css/complete-guide-grid/