CSS Grid Guide

A quick reference for CSS Grid properties

grid-template-columns / grid-template-rows


.container {
    display: grid;
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

grid-template-areas


.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "main main sidebar"
        "footer footer footer";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}

Header

Main

Sidebar

Footer

gap, row-gap, column-gap


.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    column-gap: 10px;
    row-gap: 15px;
}

justify-content


.container {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    justify-content: space-around; /* start | end | center | stretch | space-around | space-between | space-evenly */
}

align-items


.container {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    align-items: center; /* start | end | center | stretch */
    height: 150px;
}

justify-self


.item {
    justify-self: end; /* start | end | center | stretch */
}

align-self


.item {
    align-self: center; /* start | end | center | stretch */
}