tripti1410 / css-grids-quintype-demo

First demo for CSS Grid at Quintype. It contains all resources, information I used to learn CSS Grid. After this wrote an article at medium.com, linked here.

Code for quintype session on CSS grids

1. Introduction

2. Terminology
   i) Grid -container ii) Grid-item iii) Grid-lines -referenced as numbers also by name iv) Grid cell v) Grid-tracks - row and column vi) Grid-area vii) grid-gap

3. Core Principles for defining grid layout by grid lines and grid areas

4. Planning to design layout with css grids:

5. Difference between thinking with tradition approach and grid approach

6. Css grids is outside-in and two-directional layout

7. Start with pen and paper

8. Draw outline on markup, start from mobile to desktop

9. Draw grids on those

10. First place the grids and then put content on it

11. Backward compatibility → It is not supported by the older browsers, so there are few ways to do it: i) Build full-fledged fallbacks for all browsers ii) Use mobile first layout for all older browser

12. Nested grids

13. References: i) Amazing presentation on css-grids: https://www.youtube.com/watch?v=7kVeCqQCxlk ii) Paid course -> CSS advanced layout with grid: https://www.lynda.com/CSS-tutorials/Welcome/622088/651299-4.html?autoplay=true iii) Detailed series with examples which covers all the properties of css -grids https://gridbyexample.com/examples/