CSS GRID STYLES

GRID STYLES

display-grid : activates grid layout
.grid { display:grid;}

grid-template-columns : define columns
.grid{ grid-template-columns: 1fr 1fr 1fr;}

grid-template rows : define rows
.grid { grid-template-rows: 100px 100px;}

grid gap : space between grid boxes
.grid { grid-gap: 15px;}

place items : center items
.grid { place-items: center;}

justify-items : horizontal alignment inside each cell
.grid{justify-items: center;}

align-items : vertical alignment inside each cell
.grid{align-items: center;}

grid column : control width of a single item
.item { grid-column : span 2;}

grid row : control height of a single item
.item{ grid-row: span 2;}

grid template areas : name-based layout
.grid{ grid-template-areas;}

POSITIONING STYLES

position : static , relative , absolute ,fixed , sticky
div{ position: absolute; top:10px; left: 20px;}

top-bottom-left-right : move element in its positioned space
div {top: 10px; left: 20px;}

z-index : controls stacking order
div { z-index:10;}