grid-lanes-grid-placement-named-lines-001-ref.html (4405B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: Definite column placement in a grid-lanes grid (single edge)</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 position: relative; 16 border: 1px solid; 17 grid-gap: 1px; 18 grid-auto-flow: dense; 19 } 20 .t1 { 21 grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px; 22 23 } 24 .t2 { 25 grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px; 26 } 27 28 x { 29 background: grey; 30 border: 1px solid; 31 } 32 y { 33 position: absolute; 34 border-top: 1px solid blue; 35 bottom:0;height:0;left:0;right:0; 36 } 37 38 </style> 39 </head> 40 <body> 41 42 <pre>grid-column-start:</pre> 43 <div class="grid t1" style="padding-right:13px; border-right-width:5px"> 44 <x style="grid-column-start:4; background:grey"></x> 45 <x style="grid-column-start:7">-1</x> 46 <x style="grid-column-start:7">4</x> 47 <x style="grid-column-start:6">-2</x> 48 <x style="grid-column-start:5">-3</x> 49 <x style="grid-column-start:4">-4</x> 50 <x style="grid-column-start:3">-5</x> 51 <x style="grid-column-start:5">A -1</x> 52 <x style="grid-column-start:3">B -1</x> 53 <x style="grid-column-start:4">A -2</x> 54 <x style="grid-column-start:3">A -3</x> 55 <x style="grid-column-start:2">A -4</x> 56 <x style="grid-column-start:1">A -5</x> 57 <x style="grid-column-start:4">A</x> 58 <x style="grid-column-start:4">B</x> 59 <x style="grid-column-start:4">A 1</x> 60 <x style="grid-column-start:5">A 2</x> 61 <x style="grid-column-start:8">A 3</x> 62 <x style="grid-column-start:9">A 4</x> 63 <x style="grid-column-start:10">A 5</x> 64 <y style="grid-column-start:7; top:0"></y> 65 <y style="grid-column-start:7; top:2px"></y> 66 <y style="grid-column-start:6; top:4px"></y> 67 <y style="grid-column-start:5; top:6px"></y> 68 <y style="grid-column-start:4; top:8px"></y> 69 <y style="grid-column-start:3; top:10px"></y> 70 <y style="grid-column-start:5; top:12px"></y> 71 <y style="grid-column-start:3; top:14px"></y> 72 <y style="grid-column-start:4; top:16px"></y> 73 <y style="grid-column-start:3; top:18px"></y> 74 <y style="grid-column-start:2; top:20px"></y> 75 <y style="grid-column-start:1; top:22px"></y> 76 <y style="grid-column-start:4; top:24px"></y> 77 <y style="grid-column-start:4; top:26px"></y> 78 <y style="grid-column-start:4; top:28px"></y> 79 <y style="grid-column-start:5; top:30px"></y> 80 <y style="grid-column-start:8; top:32px"></y> 81 <y style="grid-column-start:9; top:34px"></y> 82 <y style="grid-column-start:10; top:36px"></y> 83 </div> 84 85 <pre>grid-column-end:</pre> 86 <div class="grid t2" style="padding-left:13px;"> 87 <x style="grid-column-start:5; background:grey"></x> 88 <x style="grid-column-start:7">-1</x> 89 <x style="grid-column-start:7">4</x> 90 <x style="grid-column-start:6">-2</x> 91 <x style="grid-column-start:5">-3</x> 92 <x style="grid-column-start:4">-4</x> 93 <x style="grid-column-start:3">-5</x> 94 <x style="grid-column-start:5">A -1</x> 95 <x style="grid-column-start:3">B -1</x> 96 <x style="grid-column-start:4">A -2</x> 97 <x style="grid-column-start:3">A -3</x> 98 <x style="grid-column-start:2">A -4</x> 99 <x style="grid-column-start:1">A -5</x> 100 <x style="grid-column-start:4">A</x> 101 <x style="grid-column-start:5">B</x> 102 <x style="grid-column-start:4">A 1</x> 103 <x style="grid-column-start:5">A 2</x> 104 <x style="grid-column-start:8">A 3</x> 105 <x style="grid-column-start:9">A 4</x> 106 <x style="grid-column-start:10">A 5</x> 107 <y style="grid-column-end:8; top:0px"></y> 108 <y style="grid-column-end:8; top:2px"></y> 109 <y style="grid-column-end:4; top:4px"></y> 110 <y style="grid-column-end:5; top:6px"></y> 111 <y style="grid-column-end:6; top:8px"></y> 112 <y style="grid-column-end:7; top:10px"></y> 113 <y style="grid-column-end:6; top:12px"></y> 114 <y style="grid-column-end:4; top:14px"></y> 115 <y style="grid-column-end:5; top:16px"></y> 116 <y style="grid-column-end:4; top:18px"></y> 117 <y style="grid-column-end:3; top:20px"></y> 118 <y style="grid-column-end:2; top:22px"></y> 119 <y style="grid-column-end:5; top:24px"></y> 120 <y style="grid-column-end:6; top:26px"></y> 121 <y style="grid-column-end:5; top:28px"></y> 122 <y style="grid-column-end:6; top:30px"></y> 123 <y style="grid-column-end:9; top:32px"></y> 124 <y style="grid-column-end:10; top:34px"></y> 125 <y style="grid-column-end:11; top:36px"></y> 126 </div> 127 128 </body> 129 </html>