.grid {
    display: grid;
    background-color: grey;
}

.indefiniteSizeGrid {
    display: grid;
    background-color: grey;
    width: -webkit-min-content;
    height: auto;
}

.inline-grid {
    display: inline-grid;
    background-color: grey;
}

.firstRowFirstColumn {
    background-color: blue;
    grid-column: 1;
    grid-row: 1;
}

.firstRowSecondColumn {
    background-color: lime;
    grid-column: 2;
    grid-row: 1;
}

.secondRowFirstColumn {
    background-color: purple;
    grid-column: 1;
    grid-row: 2;
}

.secondRowSecondColumn {
    background-color: orange;
    grid-column: 2;
    grid-row: 2;
}

.firstAutoRowSecondAutoColumn {
    grid-row: 1 / auto;
    grid-column: 2 / auto;
}

.autoLastRowAutoLastColumn {
    grid-row: auto / -1;
    grid-column: auto / -1;
}

.autoSecondRowAutoFirstColumn {
    grid-row: auto / 2;
    grid-column: auto / 1;
}

.firstRowBothColumn {
    grid-row: 1;
    grid-column: 1 / -1;
}

.secondRowBothColumn {
    grid-row: 2;
    grid-column: 1 / -1;
}

.bothRowFirstColumn {
    grid-row: 1 / -1;
    grid-column: 1;
}

.bothRowSecondColumn {
    grid-row: 1 / -1;
    grid-column: 2;
}

.bothRowBothColumn {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
}

/* Auto column / row. */
.autoRowAutoColumn {
    background-color: pink;
    grid-column: auto;
    grid-row: auto;
}

.firstRowAutoColumn {
    background-color: blue;
    grid-column: auto;
    grid-row: 1;
}

.secondRowAutoColumn {
    background-color: purple;
    grid-column: auto;
    grid-row: 2;
}

.thirdRowAutoColumn {
    background-color: navy;
    grid-column: auto;
    grid-row: 3;
}

.autoRowFirstColumn {
    background-color: lime;
    grid-column: 1;
    grid-row: auto;
}

.autoRowSecondColumn {
    background-color: orange;
    grid-column: 2;
    grid-row: auto;
}

.autoRowThirdColumn {
    background-color: magenta;
    grid-column: 3;
    grid-row: auto;
}

/* Grid element flow. */
.gridAutoFlowNone {
    grid-auto-flow: none;
}

.gridAutoFlowColumn {
    grid-auto-flow: column;
}

.gridAutoFlowRow {
    grid-auto-flow: row;
}

/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
.constrainedContainer {
    width: 10px;
    height: 10px;
}

.unconstrainedContainer {
    width: 1000px;
    height: 1000px;
}

.sizedToGridArea {
    font: 10px/1 Ahem;
    /* Make us fit our grid area. */
    width: 100%;
    height: 100%;
}

.verticalRL {
    -webkit-writing-mode: vertical-rl;
}

.verticalLR {
    -webkit-writing-mode: vertical-lr;
}

.horizontalBT {
    -webkit-writing-mode: horizontal-bt;
}

.directionRTL {
    direction: rtl;
}