Code for quintype session on CSS grids
-
Introduction
-
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 -
Core Principles for defining grid layout by grid lines and grid areas
-
Planning to design layout with css grids:
-
Difference between thinking with tradition approach and grid approach
-
Css grids is outside-in and two-directional layout
-
Start with pen and paper
-
Draw outline on markup, start from mobile to desktop
-
Draw grids on those
-
First place the grids and then put content on it
-
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
-
Nested grids
-
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/