CSS Grid For the Now Times

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:

Grid

• 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)

Columns

• grid-column (column number) / span (number) - (item)

Rows

• grid-row (row number) - (item)

Grid Areas (name all the places!!)

• grid-template-areas ( multi-line space seperated strings for naming the areas) - (container)
• grid-area (area name) - (item)