src/third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/grid.css

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