grid-lanes-grid-placement-named-lines-dense-packing-001-ref.html (3023B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>Reference: Definite column placement in a grid-lanes grid (double edge) with dense-packing enabled</title> 10 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 11 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 12 <style> 13 body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px; 18 position: relative; 19 border: 1px solid; 20 grid-auto-flow: dense; 21 column-gap: 1px; 22 } 23 24 x { 25 background: grey; 26 } 27 y { 28 position: absolute; 29 border: 1px solid blue; 30 top:0;height:0;left:0;right:0; 31 grid-row-end:span 1!important; 32 } 33 </style> 34 </head> 35 <body> 36 <pre>grid-column: / span A-start 2</pre> 37 <div class="grid"> 38 <x style="grid-row:1; grid-column:4"> </x> 39 <x style="grid-row:1; grid-column:7/span 2;">-1</x> 40 <x style="grid-row:2; grid-column:7/span 2;">4</x> 41 <x style="grid-row:3; grid-column:6/span 3;">-2</x> 42 <x style="grid-row:4; grid-column:5/span 4;">-3</x> 43 <x style="grid-row:5; grid-column:4/span 4;">-4</x> 44 <x style="grid-row:2; grid-column:3/span 2;">-5</x> 45 <x style="grid-row:6; grid-column:5/span 4;">A -1</x> 46 <x style="grid-row:3; grid-column:3/span 2;">B -1</x> 47 <x style="grid-row:7; grid-column:4/span 4;">A -2</x> 48 <x style="grid-row:4; grid-column:3/span 2;">A -3</x> 49 <x style="grid-row:6; grid-column:2/span 3;">A -4</x> 50 <x style="grid-row:8; grid-column:1/span 4;">A -5</x> 51 <x style="grid-row:9; grid-column:4/span 4;">A</x> 52 <x style="grid-row:10; grid-column:4/span 4;">B</x> 53 <x style="grid-row:11; grid-column:4/span 4;">A 1</x> 54 <x style="grid-row:8; grid-column:5/span 4;">A 2</x> 55 <x style="grid-row:5; grid-column:8/span 2;">A 3</x> 56 <x style="grid-row:1; grid-column:9/span 2;">A 4</x> 57 <x style="grid-row:2; grid-column:10/span 2;">A 5</x> 58 <y style="grid-row:1; grid-column:7/span 2;"></y> 59 <y style="grid-row:2; grid-column:7/span 2;"></y> 60 <y style="grid-row:3; grid-column:6/span 3;"></y> 61 <y style="grid-row:4; grid-column:5/span 4;"></y> 62 <y style="grid-row:5; grid-column:4/span 4;"></y> 63 <y style="grid-row:2; grid-column:3/span 2;"></y> 64 <y style="grid-row:6; grid-column:5/span 4;"></y> 65 <y style="grid-row:3; grid-column:3/span 2;"></y> 66 <y style="grid-row:7; grid-column:4/span 4;"></y> 67 <y style="grid-row:4; grid-column:3/span 2;"></y> 68 <y style="grid-row:6; grid-column:2/span 3;"></y> 69 <y style="grid-row:8; grid-column:1/span 4;"></y> 70 <y style="grid-row:9; grid-column:4/span 4;"></y> 71 <y style="grid-row:10; grid-column:4/span 4;"></y> 72 <y style="grid-row:11; grid-column:4/span 4;"></y> 73 <y style="grid-row:8; grid-column:5/span 4;"></y> 74 <y style="grid-row:5; grid-column:8/span 2;"></y> 75 <y style="grid-row:1; grid-column:9/span 2;"></y> 76 <y style="grid-row:2; grid-column:10/span 2;"></y> 77 </div> 78 </body> 79 </html>