grid-lanes-justify-content-004-ref.html (4787B)
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: Grid Lanes layout with `justify-content` in grid-lanes axis</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 11 <style> 12 html,body { 13 color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; 14 } 15 16 grid { 17 display: inline-grid; 18 gap: 1px 2px; 19 grid-template-columns: 1ch auto; 20 grid-template-rows: repeat(4,20px); 21 background: content-box silver; 22 border: 1px solid; 23 padding: 0 3px 2px 0; 24 width: 100px; 25 height: 120px; 26 align-content: center; 27 justify-items: start; 28 writing-mode: vertical-rl; 29 } 30 31 item { 32 background-color: #444; 33 color: #fff; 34 } 35 36 .tall { grid-column: span 2; padding: 11px 3px 13px 7px; } 37 38 .safe { 39 height: 10px; 40 } 41 </style> 42 </head> 43 <body> 44 45 <grid style="justify-content:start"> 46 <item class="tall" style="grid-row:1/2">1</item> 47 <item style="grid-row:2/3">2</item> 48 <item style="grid-row:3/4">3</item> 49 <item style="grid-row:4/5">4</item> 50 <item style="grid-row:2/3">5</item> 51 <item style="grid-row:3/4">6</item> 52 </grid> 53 54 <grid style="justify-content:start"> 55 <item style="grid-row:1/2">1</item> 56 <item class="tall" style="grid-row:2/3">2</item> 57 <item style="grid-row:3/4">3</item> 58 <item style="grid-row:4/5">4</item> 59 <item style="grid-row:1/2">5</item> 60 <item style="grid-row:3/4">6</item> 61 </grid> 62 63 <grid style="justify-content:safe start" class="safe"> 64 <item class="tall" style="grid-row:1/2">1</item> 65 <item style="grid-row:2/3">2</item> 66 <item style="grid-row:3/4">3</item> 67 <item style="grid-row:4/5">4</item> 68 <item style="grid-row:2/3">5</item> 69 <item style="grid-row:3/4">6</item> 70 </grid> 71 72 <grid style="justify-content:end"> 73 <item class="tall" style="grid-row:1/2">1</item> 74 <item style="grid-row:2/3">2</item> 75 <item style="grid-row:3/4">3</item> 76 <item style="grid-row:4/5">4</item> 77 <item style="grid-row:2/3">5</item> 78 <item style="grid-row:3/4">6</item> 79 </grid> 80 81 <grid style="justify-content:end"> 82 <item style="grid-row:1/2">1</item> 83 <item class="tall" style="grid-row:2/3">2</item> 84 <item style="grid-row:3/4">3</item> 85 <item style="grid-row:4/5">4</item> 86 <item style="grid-row:1/2">5</item> 87 <item style="grid-row:3/4">6</item> 88 </grid> 89 90 <grid style="justify-content:safe end" class="safe"> 91 <item class="tall" style="grid-row:1/2">1</item> 92 <item style="grid-row:2/3">2</item> 93 <item style="grid-row:3/4">3</item> 94 <item style="grid-row:4/5">4</item> 95 <item style="grid-row:2/3">5</item> 96 <item style="grid-row:3/4">6</item> 97 </grid> 98 99 <grid style="justify-content:center"> 100 <item class="tall" style="grid-row:1/2">1</item> 101 <item style="grid-row:2/3">2</item> 102 <item style="grid-row:3/4">3</item> 103 <item style="grid-row:4/5">4</item> 104 <item style="grid-row:2/3">5</item> 105 <item style="grid-row:3/4">6</item> 106 </grid> 107 108 <grid style="justify-content:center"> 109 <item style="grid-row:1/2">1</item> 110 <item class="tall" style="grid-row:2/3">2</item> 111 <item style="grid-row:3/4">3</item> 112 <item style="grid-row:4/5">4</item> 113 <item style="grid-row:1/2">5</item> 114 <item style="grid-row:3/4">6</item> 115 </grid> 116 117 <grid style="justify-content:safe center" class="safe"> 118 <item class="tall" style="grid-row:1/2">1</item> 119 <item style="grid-row:2/3">2</item> 120 <item style="grid-row:3/4">3</item> 121 <item style="grid-row:4/5">4</item> 122 <item style="grid-row:2/3">5</item> 123 <item style="grid-row:3/4">6</item> 124 </grid> 125 126 <grid style="justify-content:stretch"> 127 <item class="tall" style="grid-row:1/2">1</item> 128 <item style="grid-row:2/3">2</item> 129 <item style="grid-row:3/4">3</item> 130 <item style="grid-row:4/5">4</item> 131 <item style="grid-row:2/3">5</item> 132 <item style="grid-row:3/4">6</item> 133 </grid> 134 135 <grid style="justify-content:start"> 136 <item class="tall" style="grid-row:1/2">1</item> 137 <item style="grid-row:2/3">2</item> 138 <item style="grid-row:3/4">3</item> 139 <item style="grid-row:4/5">4</item> 140 <item style="grid-row:2/3">5</item> 141 <item style="grid-row:3/4">6</item> 142 </grid> 143 144 <grid style="justify-content:center"> 145 <item class="tall" style="grid-row:1/2">1</item> 146 <item style="grid-row:2/3">2</item> 147 <item style="grid-row:3/4">3</item> 148 <item style="grid-row:4/5">4</item> 149 <item style="grid-row:2/3">5</item> 150 <item style="grid-row:3/4">6</item> 151 </grid> 152 153 <grid style="justify-content:center"> 154 <item class="tall" style="grid-row:1/2">1</item> 155 <item style="grid-row:2/3">2</item> 156 <item style="grid-row:3/4">3</item> 157 <item style="grid-row:4/5">4</item> 158 <item style="grid-row:2/3">5</item> 159 <item style="grid-row:3/4">6</item> 160 </grid>