grid-lanes-align-content-004-ref.html (4714B)
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 `align-content` in grid 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: 2px; 24 width: 100px; 25 justify-items: start; 26 writing-mode: vertical-rl; 27 } 28 29 item { 30 background-color: #444; 31 color: #fff; 32 } 33 34 .tall { grid-column: span 2; padding-top: 30px; } 35 36 .safe { 37 height: 10px; 38 } 39 </style> 40 </head> 41 <body> 42 43 <grid style="align-content:start"> 44 <item class="tall" style="grid-row:1/2">1</item> 45 <item style="grid-row:2/3">2</item> 46 <item style="grid-row:3/4">3</item> 47 <item style="grid-row:4/5">4</item> 48 <item style="grid-row:2/3">5</item> 49 <item style="grid-row:3/4">6</item> 50 </grid> 51 52 <grid style="align-content:start"> 53 <item style="grid-row:1/2">1</item> 54 <item class="tall" style="grid-row:2/3">2</item> 55 <item style="grid-row:3/4">3</item> 56 <item style="grid-row:4/5">4</item> 57 <item style="grid-row:1/2">5</item> 58 <item style="grid-row:3/4">6</item> 59 </grid> 60 61 <grid style="align-content:safe start" class="safe"> 62 <item class="tall" style="grid-row:1/2">1</item> 63 <item style="grid-row:2/3">2</item> 64 <item style="grid-row:3/4">3</item> 65 <item style="grid-row:4/5">4</item> 66 <item style="grid-row:2/3">5</item> 67 <item style="grid-row:3/4">6</item> 68 </grid> 69 70 <grid style="align-content:end"> 71 <item class="tall" style="grid-row:1/2">1</item> 72 <item style="grid-row:2/3">2</item> 73 <item style="grid-row:3/4">3</item> 74 <item style="grid-row:4/5">4</item> 75 <item style="grid-row:2/3">5</item> 76 <item style="grid-row:3/4">6</item> 77 </grid> 78 79 <grid style="align-content:end"> 80 <item style="grid-row:1/2">1</item> 81 <item class="tall" style="grid-row:2/3">2</item> 82 <item style="grid-row:3/4">3</item> 83 <item style="grid-row:4/5">4</item> 84 <item style="grid-row:1/2">5</item> 85 <item style="grid-row:3/4">6</item> 86 </grid> 87 88 <grid style="align-content:safe end" class="safe"> 89 <item class="tall" style="grid-row:1/2">1</item> 90 <item style="grid-row:2/3">2</item> 91 <item style="grid-row:3/4">3</item> 92 <item style="grid-row:4/5">4</item> 93 <item style="grid-row:2/3">5</item> 94 <item style="grid-row:3/4">6</item> 95 </grid> 96 97 <grid style="align-content:center"> 98 <item class="tall" style="grid-row:1/2">1</item> 99 <item style="grid-row:2/3">2</item> 100 <item style="grid-row:3/4">3</item> 101 <item style="grid-row:4/5">4</item> 102 <item style="grid-row:2/3">5</item> 103 <item style="grid-row:3/4">6</item> 104 </grid> 105 106 <grid style="align-content:center"> 107 <item style="grid-row:1/2">1</item> 108 <item class="tall" style="grid-row:2/3">2</item> 109 <item style="grid-row:3/4">3</item> 110 <item style="grid-row:4/5">4</item> 111 <item style="grid-row:1/2">5</item> 112 <item style="grid-row:3/4">6</item> 113 </grid> 114 115 <grid style="align-content:safe center" class="safe"> 116 <item class="tall" style="grid-row:1/2">1</item> 117 <item style="grid-row:2/3">2</item> 118 <item style="grid-row:3/4">3</item> 119 <item style="grid-row:4/5">4</item> 120 <item style="grid-row:2/3">5</item> 121 <item style="grid-row:3/4">6</item> 122 </grid> 123 124 <grid style="align-content:stretch"> 125 <item class="tall" style="grid-row:1/2">1</item> 126 <item style="grid-row:2/3">2</item> 127 <item style="grid-row:3/4">3</item> 128 <item style="grid-row:4/5">4</item> 129 <item style="grid-row:2/3">5</item> 130 <item style="grid-row:3/4">6</item> 131 </grid> 132 133 <grid style="align-content:space-between"> 134 <item class="tall" style="grid-row:1/2">1</item> 135 <item style="grid-row:2/3">2</item> 136 <item style="grid-row:3/4">3</item> 137 <item style="grid-row:4/5">4</item> 138 <item style="grid-row:2/3">5</item> 139 <item style="grid-row:3/4">6</item> 140 </grid> 141 142 <grid style="align-content:space-around"> 143 <item class="tall" style="grid-row:1/2">1</item> 144 <item style="grid-row:2/3">2</item> 145 <item style="grid-row:3/4">3</item> 146 <item style="grid-row:4/5">4</item> 147 <item style="grid-row:2/3">5</item> 148 <item style="grid-row:3/4">6</item> 149 </grid> 150 151 <grid style="align-content:space-evenly"> 152 <item class="tall" style="grid-row:1/2">1</item> 153 <item style="grid-row:2/3">2</item> 154 <item style="grid-row:3/4">3</item> 155 <item style="grid-row:4/5">4</item> 156 <item style="grid-row:2/3">5</item> 157 <item style="grid-row:3/4">6</item> 158 </grid>