.grid {
display: grid;
background-color: grey;
}
.inline-grid {
display: inline-grid;
background-color: grey;
}
.firstRowFirstColumn {
background-color: blue;
grid-column: 1;
grid-row: 1;
}
.onlyFirstRowOnlyFirstColumn {
background-color: blue;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.firstRowSecondColumn {
background-color: lime;
grid-column: 2;
grid-row: 1;
}
.onlyFirstRowOnlySecondColumn {
background-color: lime;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.secondRowFirstColumn {
background-color: purple;
grid-column: 1;
grid-row: 2;
}
.onlySecondRowOnlyFirstColumn {
background-color: purple;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.secondRowSecondColumn {
background-color: orange;
grid-column: 2;
grid-row: 2;
}
.onlySecondRowOnlySecondColumn {
background-color: orange;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.endSecondRowEndSecondColumn {
background-color: orange;
grid-column-end: 3;
grid-row-end: 3;
}
.thirdRowSecondColumn {
background-color: red;
grid-column: 2;
grid-row: 3;
}
.firstRowThirdColumn {
background-color: magenta;
grid-column: 3;
grid-row: 1;
}
.secondRowThirdColumn {
background-color: navy;
grid-column: 3;
grid-row: 2;
}
.firstRowFourthColumn {
background-color: green;
grid-column: 4;
grid-row: 1;
}
.secondRowFourthColumn {
background-color: pink;
grid-column: 4;
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;
}
.autoRowAutoColumnSpanning2 {
background-color: maroon;
grid-column: span 2;
grid-row: auto;
}
.autoRowSpanning2AutoColumn {
background-color: aqua;
grid-column: auto;
grid-row: span 2;
}
.autoRowSpanning2AutoColumnSpanning3 {
background-color: olive;
grid-column: span 3;
grid-row: span 2;
}
.autoRowSpanning3AutoColumnSpanning2 {
background-color: indigo;
grid-column: span 2;
grid-row: span 3;
}
.autoRowFirstColumnSpanning2 {
background-color: maroon;
grid-column: 1 / span 2;
grid-row: auto;
}
.autoRowSecondColumnSpanning2 {
background-color: olive;
grid-column: 2 / span 2;
grid-row: auto;
}
.firstRowSpanning2AutoColumn {
background-color: maroon;
grid-column: auto;
grid-row: 1 / span 2;
height: 100%;
}
.secondRowSpanning2AutoColumn {
background-color: olive;
grid-column: auto;
grid-row: 2 / span 2;
height: 100%;
}
/* Grid element flow. */
.gridAutoFlowColumnSparse {
grid-auto-flow: column;
}
.gridAutoFlowColumnDense {
grid-auto-flow: column dense;
}
.gridAutoFlowRowSparse {
grid-auto-flow: row;
}
.gridAutoFlowRowDense {
grid-auto-flow: row dense;
}
/* 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 {
writing-mode: vertical-rl;
}
.verticalLR {
writing-mode: vertical-lr;
}
.horizontalTB {
writing-mode: horizontal-tb;
}
.directionRTL {
direction: rtl;
}
.directionLTR {
direction: ltr;
}