CSS Grid Layout

CSS GRID LAYOUT GRID-TEMPLATE: COLUMNS | ROWS gap 10px 5px 10px ••• •• • •• • • ••• •• • •• • • • • •• • • • • •• • • grid-template-columns 1fr 1fr 1fr auto auto repeat(4, 1fr)min-content max-content 1fr ••• •• •• • • ••• •• • •• • ••• •• • • • ••• •• • • • • • • •• • •• •• • • •••• • •• • • •• • •• grid-template-rows 1fr 1fr repeat(3, 10px)10px auto 10px ••• •• • •• • ••• •• • •• • ••• •• • •• • • • • • • • •• •• •• GRID: COLUMN | ROW grid-column 2 / 4 1 / -1 3 span 3 ••• •• • • ••• ••• •• • • ••• •• • •• • •• • •• • •• • •• • ••• •••• ••• •••• grid-row 2 2/5 3 span 2 ••• •• • • ••• •• • • ••• •• • • ••• •• • •• • •• • • •• • • • • • • • • • •• • • • • •

grid-area 2/3 3/2 ••• •• • • ••• •• • • •• • •• • •• • • • • • • • • •• • • • ••• ALIGN-CONTENT | JUSTIFY-CONTENT align-content start center end stretch space-between ••• •• • •• • • ••• •• • •• • • ••• •• • •• • • ••• •• • •• • • ••• •• • •• • • • •• • •• • •• • •• • •• • •• • •• • •• • •• • •• space-around space-evenly ••• •• • •• • • ••• •• • •• • • • •• • •• • •• • •• justify-content start center end stretch space-between ••• •• • •• • • ••• •• • •• • • ••• •• • •• • • ••• •• • •• • • ••• •• • •• • • • •• • •• • •• • •• • •• • • •• •• • •• • • •• •• space-around space-evenly ••• •• • •• • • ••• •• • •• • • • •• • •• • •• • •• place-content start center end stretch space-between ••• •• • •• • • ••• •• • •• • • ••• •• • •• • • • •• • •• • •• ••• •• • •• • • ••• •• • •• • • • •• • •• • •• • •• • •• • •• • •• space-around space-evenly ••• •• • •• • • ••• •• • •• • • • •• • •• • •• • •• ALIGN-ITEMS | JUSTIFY-ITEMS

align-items start center end stretch ••• •• • ••• ••• ••• •• • •• •• •• • •• •• • • • •• • • •• •• •• •• justify-items start center end stretch ••• •• • •• • ••• •• • •• • ••• •• • •• • ••• •• • •• • •• •• • •• • place-items start center end stretch ••• •• • •• • ••• •• • •• • ••• •• • •• • • ••• •• • •• • • •• • • • • ALIGN-SELF | JUSTIFY-SELF align-self start center end ••• •• • •• • ••• •• • ••• •• • •• • •• •• • •• •• justify-self start center end ••• •• • •• • ••• •• • •• • ••• •• • •• • •• •• •• place-self start center end ••• •• • •• • ••• •• • ••• •• • •• • •• •• • •• ••