CSS Grid

Definition

• CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

Quick Notes

• CSS Grid is better that using floats and positions and flexbox, it has more design capabilities.
• Fluid Columns are available in Grid (that break into more or less columns, without media Queries) Animation is posible with Gtid using folloing properties, eg. (grid-gap ,grid-template-columns, grid-template-rows )

Grid CSS Properties

• there properties solely for the parent and properties for children
• display: grid
• grid-template-columns
• grid-template-rows
• grid-column
• grid-row

Important terminology

• Grid Container (parent)
• Grid Items (Children)