grid.css

.grid {
    display: -ms-grid;
    display: grid;
    background-color: #DDD;
}

.grid > :nth-child(1) {
    background-color: #FCC;
}

.grid > :nth-child(2) {
    background-color: #CFC;
}

.grid > :nth-child(3) {
    background-color: #CCF;
}

.grid > :nth-child(4) {
    background-color: #C99;
}

.grid > :nth-child(5) {
    background-color: #9C9;
}

.grid > :nth-child(6) {
    background-color: #99C;
}

.grid > :nth-child(7) {
    background-color: #FFC;
}

.grid > :nth-child(8) {
    background-color: #FCF;
}

.grid > :nth-child(9) {
    background-color: #CFF;
}

.grid > :nth-child(10) {
    background-color: #CC9;
}

.grid > :nth-child(11) {
    background-color: #C9C;
}

.grid > :nth-child(12) {
    background-color: #9CC;
}

.row1-column1 {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 1;
    grid-column: 1;
}

.row1-column2 {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
}

.row1-column3 {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 3;
    grid-column: 3;
}

.row1-column4 {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 4;
    grid-column: 4;
}

.row2-column1 {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 1;
    grid-column: 1;
}

.row2-column2 {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 2;
    grid-column: 2;
}

.row2-column3 {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 3;
    grid-column: 3;
}

.row2-column4 {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column: 4;
    grid-column: 4;
}

.row3-column1 {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 1;
    grid-column: 1;
}

.row3-column2 {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 2;
    grid-column: 2;
}

.row3-column3 {
    -ms-grid-row: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    grid-column: 3;
}

.row1-columnauto {
    -ms-grid-row: 1;
    grid-row: 1;
}

.row2-columnauto {
    -ms-grid-row: 2;
    grid-row: 2;
}

.row3-columnauto {
    -ms-grid-row: 3;
    grid-row: 3;
}

.rowauto-column1 {
    -ms-grid-column: 1;
    grid-column: 1;
}

.rowauto-column2 {
    -ms-grid-column: 2;
    grid-column: 2;
}

.rowauto-column3 {
    -ms-grid-column: 3;
    grid-column: 3;
}

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

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

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

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

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

.directionRTL {
    direction: rtl;
}

.directionLTR {
    direction: ltr;
}