mhpreiman
1/10/2017 - 8:38 AM

CSS notes

  • Margin/padding %-s are calculated against element's width (eg padding:10% % depends on the same element's width)
  • CSS grid is better for two-dimensional items (layout), CSS flexbox for one-dimensional items (one item eg a menu). See here

Along the row/column, respectively:   justify/align
How the entire grid (groups of elements) is positioned: (start,end,center,stretch,space-around,space-between,space-evenly)
· justify-content along the row
· align-content along the column

How all items within the grid are positioned: (start,end,center,stretch,left,right)
· justify-items along the row (left to right)
· align-items along the column (top to bottom)

How an individual item within the grid is positioned: (start,end,center,stretch,left,right)
· justify-self along the row (overrides justify-items)
· align-self along the column (overrides align-items)

Implicit and explicit grids and grid-auto-row/column and grid-auto-flow
grid-auto-rows/columns - height of implicitly added rows/columns
grid-auto-flow - in which direction implicit elements should be created