grid-lanes-align-content-001-ref.html (5172B)
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-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-block; 18 color: #444; 19 border: 1px solid; 20 padding: 2px; 21 height: 100px; 22 width: 86px; 23 position: relative; 24 } 25 26 .multicolumn-content { 27 column-count: 4; 28 column-gap: 2px; 29 column-width: 20px; 30 height: max-content; 31 } 32 33 .column-item { 34 background-color: #444; 35 color: #fff; 36 width: 20px; 37 height: 15px; 38 break-inside: avoid; 39 margin-bottom: 1px; 40 line-height: 1em; 41 } 42 43 .tall { padding-top:30px;} 44 45 .safe { 46 height: 10px; 47 } 48 49 </style> 50 </head> 51 <body> 52 53 <grid style="align-content:start"> 54 <div class="multicolumn-content"> 55 <div class="column-item tall">1</div> 56 <div class="column-item">2</div> 57 <div class="column-item">5</div> 58 <div class="column-item">3</div> 59 <div class="column-item">6</div> 60 <div class="column-item">4</div> 61 </div> 62 </grid> 63 64 <grid style="align-content:start"> 65 <div class="multicolumn-content"> 66 <div class="column-item">1</div> 67 <div class="column-item">5</div> 68 <div class="column-item tall">2</div> 69 <div class="column-item">3</div> 70 <div class="column-item">6</div> 71 <div class="column-item">4</div> 72 </div> 73 </grid> 74 75 <grid style="align-content:safe start" class="safe"> 76 <div class="multicolumn-content"> 77 <div class="column-item tall">1</div> 78 <div class="column-item">2</div> 79 <div class="column-item">5</div> 80 <div class="column-item">3</div> 81 <div class="column-item">6</div> 82 <div class="column-item">4</div> 83 </div> 84 </grid> 85 86 <grid style="align-content:end"> 87 <div class="multicolumn-content"> 88 <div class="column-item tall">1</div> 89 <div class="column-item">2</div> 90 <div class="column-item">5</div> 91 <div class="column-item">3</div> 92 <div class="column-item">6</div> 93 <div class="column-item">4</div> 94 </div> 95 </grid> 96 97 <grid style="align-content:end"> 98 <div class="multicolumn-content"> 99 <div class="column-item">1</div> 100 <div class="column-item">5</div> 101 <div class="column-item tall">2</div> 102 <div class="column-item">3</div> 103 <div class="column-item">6</div> 104 <div class="column-item">4</div> 105 </div> 106 </grid> 107 108 <grid style="align-content:safe end" class="safe"> 109 <div class="multicolumn-content"> 110 <div class="column-item tall">1</div> 111 <div class="column-item">2</div> 112 <div class="column-item">5</div> 113 <div class="column-item">3</div> 114 <div class="column-item">6</div> 115 <div class="column-item">4</div> 116 </div> 117 </grid> 118 119 <grid style="align-content:center"> 120 <div class="multicolumn-content"> 121 <div class="column-item tall">1</div> 122 <div class="column-item">2</div> 123 <div class="column-item">5</div> 124 <div class="column-item">3</div> 125 <div class="column-item">6</div> 126 <div class="column-item">4</div> 127 </div> 128 </grid> 129 130 <grid style="align-content:center"> 131 <div class="multicolumn-content"> 132 <div class="column-item">1</div> 133 <div class="column-item">5</div> 134 <div class="column-item tall">2</div> 135 <div class="column-item">3</div> 136 <div class="column-item">6</div> 137 <div class="column-item">4</div> 138 </div> 139 </grid> 140 141 <grid style="align-content:safe center" class="safe"> 142 <div class="multicolumn-content"> 143 <div class="column-item tall">1</div> 144 <div class="column-item">2</div> 145 <div class="column-item">5</div> 146 <div class="column-item">3</div> 147 <div class="column-item">6</div> 148 <div class="column-item">4</div> 149 </div> 150 </grid> 151 152 <grid style="align-content:stretch"> 153 <div class="multicolumn-content"> 154 <div class="column-item tall">1</div> 155 <div class="column-item">2</div> 156 <div class="column-item">5</div> 157 <div class="column-item">3</div> 158 <div class="column-item">6</div> 159 <div class="column-item">4</div> 160 </div> 161 </grid> 162 163 <grid style="align-content:start"> 164 <div class="multicolumn-content"> 165 <div class="column-item tall">1</div> 166 <div class="column-item">2</div> 167 <div class="column-item">5</div> 168 <div class="column-item">3</div> 169 <div class="column-item">6</div> 170 <div class="column-item">4</div> 171 </div> 172 </grid> 173 174 <grid style="align-content:center"> 175 <div class="multicolumn-content"> 176 <div class="column-item tall">1</div> 177 <div class="column-item">2</div> 178 <div class="column-item">5</div> 179 <div class="column-item">3</div> 180 <div class="column-item">6</div> 181 <div class="column-item">4</div> 182 </div> 183 </grid> 184 185 <grid style="align-content:center"> 186 <div class="multicolumn-content"> 187 <div class="column-item tall">1</div> 188 <div class="column-item">2</div> 189 <div class="column-item">5</div> 190 <div class="column-item">3</div> 191 <div class="column-item">6</div> 192 <div class="column-item">4</div> 193 </div> 194 </grid>