OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 | 5 |
6 .grid { | 6 .grid { |
7 grid-template-columns: 100px 200px; | 7 grid-template-columns: 100px 200px; |
8 grid-template-rows: 50px 150px; | 8 grid-template-rows: 50px 150px; |
9 width: 400px; | 9 width: 500px; |
10 height: 300px; | 10 height: 300px; |
11 border: 5px solid black; | 11 border: 5px solid black; |
12 margin: 30px; | 12 margin: 30px; |
13 padding: 15px; | 13 padding: 15px; |
14 /* Ensures that the grid container is the containing block of the absolutely
positioned grid children. */ | 14 /* Ensures that the grid container is the containing block of the absolutely
positioned grid children. */ |
15 position: relative; | 15 position: relative; |
| 16 background-color: transparent; |
16 } | 17 } |
17 | 18 |
18 .container { | 19 .container { |
19 position: relative; | 20 position: relative; |
20 float: left; | 21 float: left; |
21 } | 22 } |
22 | 23 |
23 .absolute { | 24 .absolute { |
24 position: absolute; | 25 position: absolute; |
25 } | 26 } |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
68 style="right: 10px;"> | 69 style="right: 10px;"> |
69 </div> | 70 </div> |
70 <div class="absolute onlySecondRowOnlyFirstColumn percentageSize" | 71 <div class="absolute onlySecondRowOnlyFirstColumn percentageSize" |
71 style="top: 15px;"> | 72 style="top: 15px;"> |
72 </div> | 73 </div> |
73 <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div> | 74 <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div> |
74 </div> | 75 </div> |
75 </div> | 76 </div> |
76 | 77 |
77 </body> | 78 </body> |
OLD | NEW |