CSS Grid Layout Examples

Grid Definition

    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 400px 200px 100px;
A
B
C
D
E
F

Grid Areas

    display: grid;
    grid-template-areas: "header  header"
                         "sidebar main  "
                         "sidebar footer";
header
sidebar
main
footer

Item Placement

    display: grid;
    grid-template-rows: repeat(4, 100px);
    grid-template-columns: repeat(4, 150px);
grid-row: 3;

grid-column: 2;
grid-row: 2 / 5;

grid-column:
3 / span 2;

Alignment

Grid Tracks Alignment

    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 150px 150px 150px;
    height: 500px;
    width: 650px;
    align-content: center;
    justify-content: space-evenly;
grid-row: 1;

grid-column: 1 / 3;
grid-row: 1 / 3;

grid-column: 3;
grid-row: 2;

grid-column: 1;
grid-row: 2;

grid-column: 2;

Grid Items Alignment

    display: grid;
    grid-template-rows: 200px 200px;
    grid-template-columns: 400px 400px;
align-self: stretch;

justify-self: stretch;
align-self: end;

justify-self: start;
grid-column: span 2;

align-self: center;

justify-self: center;

Responsive Design

    display: grid;
    grid-gap: 10px 20px;
    grid-template-rows: 100px 1fr auto;
    grid-template-columns: 1fr 200px;
    grid-template-areas: "header  header"
                         "content aside "
                         "footer  aside ";

    @media (max-width: 600px) {
        grid-gap: 0;
        grid-template-rows: auto 1fr auto auto;
        grid-template-columns: 1fr;
        grid-template-areas: "header "
                             "content"
                             "aside  "
                             "footer ";
    }