grid-lanes-grid-placement-named-lines-dense-packing-001.html (4208B)
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>CSS Grid Test: 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 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry"> 13 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int"> 14 <link rel="match" href="grid-lanes-grid-placement-named-lines-dense-packing-001-ref.html"> 15 <style> 16 body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; } 17 18 .grid { 19 display: grid-lanes; 20 position: relative; 21 border: 1px solid; 22 grid-template-columns: [A-start] 60px 60px 60px; 23 /* This creates implicit B-start and B-end lines, and A-start and E-end lines. */ 24 grid-template-areas: "B A"; 25 grid-auto-flow: dense; 26 grid-auto-columns: 40px; 27 gap: 0 1px; 28 } 29 30 x { 31 background: grey; 32 } 33 34 y { 35 position: absolute; 36 border: 1px solid blue; 37 bottom:0;height:0;left:0;right:0; 38 } 39 </style> 40 </head> 41 <body> 42 <pre>grid-column: / span A-start 2</pre> 43 <div class="grid"> 44 <x style="grid-column:1"> </x> 45 <!-- This creates 1 extra grid-lines at the end of the container named A-start, which creates 2 implicit tracks. --> 46 <x style="grid-column:-1/span A-start 2">-1</x> 47 <x style="grid-column:4/span A-start 2">4</x> 48 <x style="grid-column:-2/span A-start 2">-2</x> 49 <x style="grid-column:-3/span A-start 2">-3</x> 50 <x style="grid-column:-4/span A-start 2">-4</x> 51 <!-- This creates an implicit track at the beginning of the container, and will span until it hits 2 lines named A-start. --> 52 <x style="grid-column:-5/span A-start 2">-5</x> 53 <!-- "A-start -1" implies we are looking for the first line to the left of -1 named A-start --> 54 <x style="grid-column:A-start -1/span A-start 2">A -1</x> 55 <!-- There are no lines named B, all implicit lines are named B, go left until we find the first implicit line named B, which turns out to be line -5.--> 56 <x style="grid-column:B -1/span A-start 2">B -1</x> 57 <x style="grid-column:A-start -2/span A-start 2">A -2</x> 58 <x style="grid-column:A-start -3/span A-start 2">A -3</x> 59 <x style="grid-column:A-start -4/span A-start 2">A -4</x> 60 <x style="grid-column:A-start -5/span A-start 2">A -5</x> 61 <x style="grid-column:A-start/span A-start 2">A</x> 62 <!-- Starts at B, spans until the next B, but there is no next B, so all implicit lines are named B, so it ends at the first implicit line. --> 63 <x style="grid-column:B/span B">B</x> 64 <x style="grid-column:A-start 1/span A-start 2">A 1</x> 65 <x style="grid-column:A-start 2/span A-start 2">A 2</x> 66 <x style="grid-column:A-start 3/span A-start 2">A 3</x> 67 <x style="grid-column:A-start 4/span A-start 2">A 4</x> 68 <x style="grid-column:A-start 5/span A-start 2">A 5</x> 69 <!-- These lines are explicitly placed to mark the top of where the gray boxes should go. --> 70 <y style="grid-column:-1/span A-start 2; top:0em"></y> 71 <y style="grid-column:4/span A-start 2; top:1em"></y> 72 <y style="grid-column:-2/span A-start 2; top:2em"></y> 73 <y style="grid-column:-3/span A-start 2; top:3em"></y> 74 <y style="grid-column:-4/span A-start 2; top:4em"></y> 75 <y style="grid-column:-5/span A-start 2; top:1em"></y> 76 <y style="grid-column:A-start -1/span A-start 2; top:5em"></y> 77 <y style="grid-column:B -1/span A-start 2; top:2em"></y> 78 <y style="grid-column:A-start -2/span A-start 2; top:6em"></y> 79 <y style="grid-column:A-start -3/span A-start 2; top:3em"></y> 80 <y style="grid-column:A-start -4/span A-start 2; top:5em"></y> 81 <y style="grid-column:A-start -5/span A-start 2; top:7em"></y> 82 <y style="grid-column:A-start/span A-start 2; top:8em"></y> 83 <y style="grid-column:B/span B; top:9em"></y> 84 <y style="grid-column:A-start 1/span A-start 2; top:10em"></y> 85 <y style="grid-column:A-start 2/span A-start 2; top:7em"></y> 86 <y style="grid-column:A-start 3/span A-start 2; top:4em"></y> 87 <y style="grid-column:A-start 4/span A-start 2; top:0em"></y> 88 <y style="grid-column:A-start 5/span A-start 2; top:1em"></y> 89 </div> 90 </body> 91 </html>