| OLD | NEW | 
|   1 <!DOCTYPE HTML> |   1 <!DOCTYPE HTML> | 
|   2 <html> |   2 <html> | 
|   3 <head> |   3 <head> | 
|   4 <link href="resources/grid.css" rel="stylesheet"> |   4 <link href="resources/grid.css" rel="stylesheet"> | 
|   5 <style> |   5 <style> | 
|   6 .grid { |   6 .grid { | 
|   7     grid-template-rows: 20px; |   7     grid-template-rows: 20px; | 
|   8     grid-template-columns: 10px; |   8     grid-template-columns: 10px; | 
|   9 } |   9 } | 
|  10  |  10  | 
|  11 .gridAutoFixedFixed { |  11 .gridAutoFixedFixed { | 
|  12     grid-auto-rows: 30px; |  12     grid-auto-rows: 30px; | 
|  13     grid-auto-columns: 50px; |  13     grid-auto-columns: 50px; | 
|  14 } |  14 } | 
|  15  |  15  | 
|  16 .gridAreas { |  16 .gridAreas { | 
|  17     grid-template-areas: ". ." |  17     grid-template-areas: ". ." | 
|  18                          ". placeholder"; |  18                          ". placeholder"; | 
|  19 } |  19 } | 
|  20  |  20  | 
|  21 .gridAutoMinMax { |  21 .gridAutoMinMax { | 
 |  22     width: 1000px; | 
|  22     height: 1000px; |  23     height: 1000px; | 
|  23     grid-auto-rows: minmax(10%, 15px); |  24     grid-auto-rows: minmax(10%, 15px); | 
|  24     grid-auto-columns: minmax(30%, 100px); |  25     grid-auto-columns: minmax(30%, 100px); | 
|  25 } |  26 } | 
|  26  |  27  | 
|  27 .gridAutoMinMaxContent { |  28 .gridAutoMinMaxContent { | 
|  28     grid-auto-rows: min-content; |  29     grid-auto-rows: min-content; | 
|  29     grid-auto-columns: max-content; |  30     grid-auto-columns: max-content; | 
|  30 } |  31 } | 
|  31 </style> |  32 </style> | 
| (...skipping 22 matching lines...) Expand all  Loading... | 
|  54 </div> |  55 </div> | 
|  55  |  56  | 
|  56 <div class="unconstrainedContainer" style="position: relative"> |  57 <div class="unconstrainedContainer" style="position: relative"> | 
|  57     <div class="grid gridAutoFixedFixed gridAreas"> |  58     <div class="grid gridAutoFixedFixed gridAreas"> | 
|  58         <div style="grid-area: placeholder;" class="sizedToGridArea" data-offset
    -x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XX
    XXX XXXXXX</div> |  59         <div style="grid-area: placeholder;" class="sizedToGridArea" data-offset
    -x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XX
    XXX XXXXXX</div> | 
|  59     </div> |  60     </div> | 
|  60 </div> |  61 </div> | 
|  61  |  62  | 
|  62 </body> |  63 </body> | 
|  63 </html> |  64 </html> | 
| OLD | NEW |