Scribd
Upload
211 views2 pages

CSS Grid Layout Guide

This document provides an overview of CSS Grid properties for controlling layout and alignment. It describes how to set the grid display, define grid spans, template areas, gaps between rows and columns, align and justify individual and groups of grid items both vertically and horizontally, and use subgrids.

Uploaded by

sailormunelune
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
211 views2 pages

CSS Grid Layout Guide

This document provides an overview of CSS Grid properties for controlling layout and alignment. It describes how to set the grid display, define grid spans, template areas, gaps between rows and columns, align and justify individual and groups of grid items both vertically and horizontally, and use subgrids.

Uploaded by

sailormunelune
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

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