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)