Skip to content

Instantly share code, notes, and snippets.

@mornir

mornir/info.md

Last active April 5, 2018 16:49
Show Gist options
  • Save mornir/5f21eaae37c8d82bfae1bbb584eb1397 to your computer and use it in GitHub Desktop.
Save mornir/5f21eaae37c8d82bfae1bbb584eb1397 to your computer and use it in GitHub Desktop.
Download ZIP
#flexbox #grid
Raw
info.md

Flexbox

justify-content = main axis

align-items = cross axis

align-content = cross axis with wrap; to be used when weird gap appear between rows/columns

Grid

photo gallery: grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));

justify-items: align items on the horizontal axis

align-items: align items on the vertical axis

if (if grid items don't take all the space of the grid, add a border to the grid to check) { justify-content: align the grid itself on the horizontal axis

align-content: align the grid itself on the vertical axis }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment