| .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; |
| } |