use auto to auto size columns to use up rest of the screen width
grid-gap: (size) separates columns and rows
04 - CSS Grid Dev Tools
Firefox can switch on/off grids
It can also draw lines and show area names.
05 - Grid Implicit vs. Explicit Tracks
Create explicit columns with grid-template-columns: (size) (size)... or grid-template-rows: (size) (size)...
Size implicit columns and rows with grid-auto-columns: (size) (size)... and grid-auto-rows: (size) (size)...
Implicit rows/columns appear after explicit grid.
06 - grid-auto-flow Explained
Decides if new elements are placed in rows or columns. Columns is default.
It can be set with: grid-auto-flow: column or grid-auto-flow: column
07 - Sizing Tracks
Be careful when using percentages in sizing, they dont take into account margins.
grid-template-columns: 100px 1fr 1fr 2fr (1fr = fraction) makes 1 100px column, the other share the rest of the screen size with the defined ratio 1:1:2.
You can combine auto and 1fr
08 - CSS Grid repeat Function
You can write things like grid-template-columns: repeat(4, 1fr 2fr); instead of grid-template-columns: 1fr 2fr 1fr 2fr;
09 - Sizing Grid Items
Use grid-column: span 3 or grid-row: span 3
Will not overflow, but wrap over to the next row
If wraping doesn't suffice, it will overflow.
10 - Placing Grid Items
You can explicitely define the start and end tracks of an item with grid-column-start: 2 and grid-column-end: 5 or shorthand grid-column: 2 / 5 or grid-column: 2 / span 3
Negative numbers are also possible:
grid-column: 2 / 5 = grid-column: 2 / -2 for a 5 column layout.
