Hopefully by the end of my research this will serve as a reference that I can understand and use later
There is Very Good Browser Support exists and we can use this in our projects now.
- Can I Use - CSS Grid
Project: https://github.com/KrisHedges/CSS-Grid-Learning
Other Helpful Links:
- CSS Grid on MDN
- A Complete Guide To Grid - CSS Tricks
- CSS Grid Changes EVERYTHING - Youtube Presentation
For Reference:
- display grid (or inline-grid) - (container)
- grid-template-columns 20% auto 20% (ordered list of column widths) - (container)
- grid-template-rows 60% 40% (ordered list of column rows) - (container)
- grid-column (column number) / span (number) - (item)
- grid-row (row number) - (item)
- grid-template-areas ( multi-line space seperated strings for naming the areas) - (container)
- grid-area (area name) - (item)