OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <link href="resources/grid.css" rel="stylesheet"> | |
5 <style type="text/css"> | |
Julien - ping for review
2014/03/20 18:33:14
No need for |type|.
| |
6 .autoRowFirstColumnSpanning2 { | |
7 background-color: maroon; | |
8 grid-column: 1 / span 2; | |
9 grid-row: auto; | |
10 } | |
11 | |
12 .autoRowSecondColumnSpanning2 { | |
13 background-color: olive; | |
14 grid-column: 2 / span 2; | |
15 grid-row: auto; | |
16 } | |
17 | |
18 .autoRowFirstColumnSpanning3 { | |
19 background-color: teal; | |
20 grid-column: 1 / span 3; | |
21 grid-row: auto; | |
22 } | |
23 | |
24 .firstRowSpanning2AutoColumn { | |
25 background-color: maroon; | |
26 grid-column: auto; | |
27 grid-row: 1 / span 2; | |
28 height: 100%; | |
29 } | |
30 | |
31 .secondRowSpanning2AutoColumn { | |
32 background-color: olive; | |
33 grid-column: auto; | |
34 grid-row: 2 / span 2; | |
35 height: 100%; | |
36 } | |
37 | |
38 .firstRowSpanning3AutoColumn { | |
39 background-color: teal; | |
40 grid-column: auto; | |
41 grid-row: 1 / span 3; | |
42 height: 100%; | |
43 } | |
44 </style> | |
45 </head> | |
46 <body> | |
47 <h1>Auto-placement definite span</h1> | |
48 <p>Checks that span is supported in auto-placement for definite positions.</ p> | |
49 | |
50 <h2>auto-flow row & spanning columns</h2> | |
51 <div class="grid gridAutoFlowRow"> | |
Julien - ping for review
2014/03/20 18:33:14
Shouldn't you define the grid's columns and rows i
| |
52 <div class="autoRowFirstColumnSpanning2">autoRowFirstColumnSpanning2</di v> | |
53 <div class="autoRowSecondColumnSpanning2">autoRowSecondColumnSpanning2</ div> | |
54 <div class="autoRowFirstColumnSpanning3">autoRowFirstColumnSpanning3</di v> | |
55 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
56 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
57 </div> | |
58 | |
59 <h2>auto-flow row & spanning rows</h2> | |
60 <div class="grid gridAutoFlowRow"> | |
61 <div class="firstRowSpanning2AutoColumn">firstRowSpanning2AutoColumn</di v> | |
62 <div class="secondRowSpanning2AutoColumn">secondRowSpanning2AutoColumn</ div> | |
63 <div class="firstRowSpanning3AutoColumn">firstRowSpanning3AutoColumn</di v> | |
64 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
65 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
66 </div> | |
67 | |
68 <h2>auto-flow column & spanning rows</h2> | |
69 <div class="grid gridAutoFlowColumn"> | |
70 <div class="firstRowSpanning2AutoColumn">firstRowSpanning2AutoColumn</di v> | |
71 <div class="secondRowSpanning2AutoColumn">secondRowSpanning2AutoColumn</ div> | |
72 <div class="firstRowSpanning3AutoColumn">firstRowSpanning3AutoColumn</di v> | |
73 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
74 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
75 </div> | |
76 | |
77 <h2>auto-flow column & spanning columns</h2> | |
78 <div class="grid gridAutoFlowColumn"> | |
79 <div class="autoRowFirstColumnSpanning2">autoRowFirstColumnSpanning2</di v> | |
80 <div class="autoRowSecondColumnSpanning2">autoRowSecondColumnSpanning2</ div> | |
81 <div class="autoRowFirstColumnSpanning3">autoRowFirstColumnSpanning3</di v> | |
82 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
83 <div class="autoRowAutoColumn">autoRowAutoColumn</div> | |
84 </div> | |
85 </body> | |
86 </html> | |
OLD | NEW |