.a {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-self: stretch;
    align-self: stretch;
    grid-column-start: 1;
    grid-column-end: span 3;
}

.b {
    display: inline-grid;
    grid-template-rows: 10px repeat(4, 250px 10px) 20px;
    justify-self: stretch;
    align-self: stretch;
    grid-row-start: 1;
    grid-row-end: span 3;
}

.c {
    grid-column: 1 / span 3;
}

.d {
    grid-column: 1 / 3;
    grid-row: span 2 / 5;
}

.e {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
}

.warn {
    grid-column-end: 3;
    grid: subgrid;
    grid-gap: 1rem;
    grid-template-areas: "head head"
                         "nav  main"
                         "foot ....";
}

.warn-gap-rows {
    grid-gap: 1rem;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a a"
        "a a";
}

.warn-gap-rows {
    grid-column-gap: 1rem;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "b b"
        "b b";
}

.warn-gap-columns {
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "c c"
        "c c";
}

.warn-gap-columns {
    grid-row-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "d d"
        "d d";
}

.unknown {
    justify-self: start;
    -ms-flex-item-align: start;
        align-self: start;
}

.flex {
    justify-self: flex-end;
    -ms-flex-item-align: end;
        align-self: flex-end;
}

@supports (display: grid) {
    .foo {
        display: grid;
    }
}

@supports (justify-items: start) {
    .foo {
        justify-items: start;
    }
}

.warn {
    grid-column-span: 2;
    grid-row-span: 2;
    grid-auto-columns: 100px;
    grid-auto-rows: 100px;
    grid-auto-flow: column;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));
}
