333 lines
5.4 KiB
CSS
333 lines
5.4 KiB
CSS
.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;
|
|
}
|
|
|
|
.firstRowThirdColumn {
|
|
background-color: magenta;
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.firstRowFourthColumn {
|
|
background-color: green;
|
|
grid-column: 4;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.secondRowThirdColumn {
|
|
background-color: navy;
|
|
grid-column: 3;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.secondRowFourthColumn {
|
|
background-color: pink;
|
|
grid-column: 4;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.thirdRowFirstColumn {
|
|
background-color: olive;
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.thirdRowSecondColumn {
|
|
background-color: maroon;
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.thirdRowThirdColumn {
|
|
background-color: yellow;
|
|
grid-column: 3;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.fourthRowFirstColumn {
|
|
background-color: red;
|
|
grid-column: 1;
|
|
grid-row: 4;
|
|
}
|
|
|
|
.fourthRowSecondColumn {
|
|
background-color: aqua;
|
|
grid-column: 2;
|
|
grid-row: 4;
|
|
}
|
|
|
|
.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;
|
|
-webkit-writing-mode: vertical-rl;
|
|
}
|
|
.verticalLR {
|
|
writing-mode: vertical-lr;
|
|
-webkit-writing-mode: vertical-lr;
|
|
}
|
|
.horizontalTB {
|
|
writing-mode: horizontal-tb;
|
|
-webkit-writing-mode: horizontal-tb;
|
|
}
|
|
.horizontalBT {
|
|
writing-mode: horizontal-bt;
|
|
-webkit-writing-mode: horizontal-bt;
|
|
}
|
|
.directionRTL {
|
|
direction: rtl;
|
|
}
|
|
.directionLTR {
|
|
direction: ltr;
|
|
}
|