CSS Grid | Intro
The best way to position your elements
PORTFOLIO PROJECTS
Exercise
two-dimensional grid-based layout system: x-y axis
columns / rows
past layout efforts: tables, floats, positioning and inline-block
Parent Element: Grid Container
Child Element: Grid Item
container / item / line / track / cell / area span display:grid fr
display-grid-columns display-grid-rows grid-column:start grid-row:end
First 3 Steps
1. Define container element as a grid (display: grid)
2. Define column and row sizes with (grid-template-columns / grid-template-rows)
3. Place child elements into the grid
Custom Grid Sizing
Custom classes
Custom media queries
12 Columns (BF)
Predefined classes (BF)
Four / Five breakpoints (B/F)
CSS Grid Tricks
Grid Garden
MDN: Grid
Flexbox
Bootstrap
Foundation
The above grid item becomes a grid container ready for a new grid template.