LayoutTests/fast/css-grid-layout/resources/grid.css

   1 .grid {
   2     display: -webkit-grid;
   3     background-color: grey;
   4 }
   5
   6 .indefiniteSizeGrid {
   7     display: -webkit-grid;
   8     background-color: grey;
   9     width: -webkit-min-content;
  10     height: auto;
  11 }
  12
  13 .inline-grid {
  14     display: -webkit-inline-grid;
  15     background-color: grey;
  16 }
  17
  18 .firstRowFirstColumn {
  19     background-color: blue;
  20     -webkit-grid-column: 1;
  21     -webkit-grid-row: 1;
  22 }
  23
  24 .firstRowSecondColumn {
  25     background-color: lime;
  26     -webkit-grid-column: 2;
  27     -webkit-grid-row: 1;
  28 }
  29
  30 .secondRowFirstColumn {
  31     background-color: purple;
  32     -webkit-grid-column: 1;
  33     -webkit-grid-row: 2;
  34 }
  35
  36 .secondRowSecondColumn {
  37     background-color: orange;
  38     -webkit-grid-column: 2;
  39     -webkit-grid-row: 2;
  40 }
  41
  42 .firstAutoRowSecondAutoColumn {
  43     -webkit-grid-row: 1 / auto;
  44     -webkit-grid-column: 2 / auto;
  45 }
  46
  47 .autoLastRowAutoLastColumn {
  48     -webkit-grid-row: auto / -1;
  49     -webkit-grid-column: auto / -1;
  50 }
  51
  52 .autoSecondRowAutoFirstColumn {
  53     -webkit-grid-row: auto / 2;
  54     -webkit-grid-column: auto / 1;
  55 }
  56
  57 .firstRowBothColumn {
  58     -webkit-grid-row: 1;
  59     -webkit-grid-column: 1 / -1;
  60 }
  61
  62 .secondRowBothColumn {
  63     -webkit-grid-row: 2;
  64     -webkit-grid-column: 1 / -1;
  65 }
  66
  67 .bothRowFirstColumn {
  68     -webkit-grid-row: 1 / -1;
  69     -webkit-grid-column: 1;
  70 }
  71
  72 .bothRowSecondColumn {
  73     -webkit-grid-row: 1 / -1;
  74     -webkit-grid-column: 2;
  75 }
  76
  77 .bothRowBothColumn {
  78     -webkit-grid-row: 1 / -1;
  79     -webkit-grid-column: 1 / -1;
  80 }
  81
  82 /* Auto column / row. */
  83 .autoRowAutoColumn {
  84     background-color: pink;
  85     -webkit-grid-column: auto;
  86     -webkit-grid-row: auto;
  87 }
  88
  89 .firstRowAutoColumn {
  90     background-color: blue;
  91     -webkit-grid-column: auto;
  92     -webkit-grid-row: 1;
  93 }
  94
  95 .secondRowAutoColumn {
  96     background-color: purple;
  97     -webkit-grid-column: auto;
  98     -webkit-grid-row: 2;
  99 }
 100
 101 .thirdRowAutoColumn {
 102     background-color: navy;
 103     -webkit-grid-column: auto;
 104     -webkit-grid-row: 3;
 105 }
 106
 107 .autoRowFirstColumn {
 108     background-color: lime;
 109     -webkit-grid-column: 1;
 110     -webkit-grid-row: auto;
 111 }
 112
 113 .autoRowSecondColumn {
 114     background-color: orange;
 115     -webkit-grid-column: 2;
 116     -webkit-grid-row: auto;
 117 }
 118
 119 .autoRowThirdColumn {
 120     background-color: magenta;
 121     -webkit-grid-column: 3;
 122     -webkit-grid-row: auto;
 123 }
 124
 125 .autoRowAutoColumnSpanning2 {
 126     background-color: maroon;
 127     -webkit-grid-column: span 2;
 128     -webkit-grid-row: auto;
 129 }
 130
 131 .autoRowSpanning2AutoColumn {
 132     background-color: aqua;
 133     -webkit-grid-column: auto;
 134     -webkit-grid-row: span 2;
 135 }
 136
 137 .autoRowSpanning2AutoColumnSpanning3 {
 138     background-color: olive;
 139     -webkit-grid-column: span 3;
 140     -webkit-grid-row: span 2;
 141 }
 142
 143 .autoRowSpanning3AutoColumnSpanning2 {
 144     background-color: indigo;
 145     -webkit-grid-column: span 2;
 146     -webkit-grid-row: span 3;
 147 }
 148
 149 /* Grid element flow. */
 150 .gridAutoFlowStack {
 151     -webkit-grid-auto-flow: stack;
 152 }
 153
 154 .gridAutoFlowColumn {
 155     -webkit-grid-auto-flow: column;
 156 }
 157
 158 .gridAutoFlowColumnDense {
 159     -webkit-grid-auto-flow: column dense;
 160 }
 161
 162 .gridAutoFlowRow {
 163     -webkit-grid-auto-flow: row;
 164 }
 165
 166 .gridAutoFlowRowDense {
 167     -webkit-grid-auto-flow: row dense;
 168 }
 169
 170 /* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
 171 .constrainedContainer {
 172     width: 10px;
 173     height: 10px;
 174 }
 175
 176 .unconstrainedContainer {
 177     width: 1000px;
 178     height: 1000px;
 179 }
 180
 181 .sizedToGridArea {
 182     font: 10px/1 Ahem;
 183     /* Make us fit our grid area. */
 184     width: 100%;
 185     height: 100%;
 186 }
 187
 188 .verticalRL {
 189     -webkit-writing-mode: vertical-rl;
 190 }
 191
 192 .verticalLR {
 193     -webkit-writing-mode: vertical-lr;
 194 }
 195
 196 .horizontalBT {
 197     -webkit-writing-mode: horizontal-bt;
 198 }
 199
 200 .directionRTL {
 201     direction: rtl;
 202 }