You are on page 1of 2

CSS GRID DISPLAY

.wrapper{
display: grid;
}

CSS GRID SPANS


.box{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
}
or
.box{
grid-column: 1 / 3;
grid-row-end: 1;
}
or
CSS GRID AREA
.box{
grid-area:one;
}
.wrapper{
grid-template-areas: 'one one' 'one'

CSS GRID GAP


.wrapper{
column-gap: 20px;
row-gap: 10px;
}

CSS GRID ALIGN GROUP BLOCK


.wrapper{
align-items: auto;
align-items: normal;
align-items: start;
align-items: end;
align-items: center;
align-items: stretch;
align-items: baseline;
align-items: first baseline;
align-items: last baseline;
}

CSS GRID ALIGN SINGLE BLOCK


.box{
align-self: auto;
align-self: normal;
align-self: start;
align-self: end;
align-self: center;
align-self: stretch;
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
}

CSS GRID JUSTIFY GROUP INLINE


.wrapper{
justify-items: auto;
justify-items: normal;
justify-items: start;
justify-items: end;
justify-items: center;
justify-items: stretch;
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;
}

CSS GRID JUSTIFY SINGLE INLINE


.box{
justify-self: auto;
justify-self: normal;
justify-self: start;
justify-self: end;
justify-self: center;
justify-self: stretch;
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;
}

CSS GRID SUBGRIB


.box{
display:grid;
grid-template-columns:subgrid;
grid-template-rows: subgrid;
}

You might also like