column-grid-lanes-container-baseline-005a-ref.html (5707B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .test-section { 7 margin: 10px 0; 8 border: 1px solid #666; 9 padding: 8px; 10 font: 16px/1 monospace; 11 } 12 13 .side-by-side { 14 display: flex; 15 gap: 20px; 16 align-items: flex-start; 17 } 18 19 .four-column { 20 display: flex; 21 gap: 15px; 22 align-items: flex-start; 23 } 24 25 .test-variant { 26 flex: 1; 27 border: 1px solid #ccc; 28 padding: 8px; 29 background: #fafafa; 30 } 31 32 .container { 33 display: flex; 34 align-items: last baseline; 35 gap: 10px; 36 border: 1px solid blue; 37 padding: 5px; 38 margin: 5px 0; 39 background: #f9f9f9; 40 text-decoration: underline; 41 } 42 43 .multicolumn { 44 column-count: 2; 45 column-width: 40px; 46 column-gap: 0px; 47 border: 1px solid red; 48 background: white; 49 display: inline-block; 50 } 51 52 .multicolumn-item { 53 background: lightblue; 54 padding: 4px; 55 border: 1px solid navy; 56 font-size: 12px; 57 text-align: center; 58 break-inside: avoid; 59 } 60 61 .multicolumn-item:last-child { 62 margin-bottom: 0; 63 } 64 65 .text-reference { 66 font-size: 14px; 67 background: yellow; 68 padding: 6px; 69 font-weight: bold; 70 } 71 72 .multicolumn-item:nth-child(1) { 73 height: 25px; 74 background: lightcoral; 75 font-size: 10px; 76 display: flex; 77 align-items: flex-start; 78 } 79 80 .multicolumn-item:nth-child(3) { 81 height: 35px; 82 background: lightgreen; 83 font-size: 16px; 84 display: flex; 85 align-items: center; 86 } 87 88 .multicolumn-item:nth-child(2) { 89 height: 30px; 90 background: lightpink; 91 font-size: 12px; 92 display: flex; 93 align-items: flex-end; 94 } 95 96 .multicolumn-item:nth-child(4) { 97 height: 40px; 98 background: lightyellow; 99 font-size: 14px; 100 display: flex; 101 align-items: flex-start; 102 } 103 104 .horizontal-tb { writing-mode: horizontal-tb; } 105 .vertical-rl { writing-mode: vertical-rl; } 106 .vertical-lr { writing-mode: vertical-lr; } 107 108 .ltr { direction: ltr; } 109 .rtl { direction: rtl; } 110 111 .vertical-rl .multicolumn, 112 .vertical-lr .multicolumn { 113 column-count: 2; 114 column-width: 50px; 115 column-gap: 0px; 116 height: 120px; 117 } 118 119 .vertical-rl .multicolumn-item, 120 .vertical-lr .multicolumn-item { 121 width: 40px; 122 height: auto; 123 min-height: 20px; 124 } 125 126 .vertical-rl .text-reference, 127 .vertical-lr .text-reference { 128 writing-mode: inherit; 129 height: 60px; 130 width: 25px; 131 display: flex; 132 align-items: center; 133 justify-content: center; 134 font-size: 12px; 135 } 136 </style> 137 </head> 138 <body> 139 <div class="test-section"> 140 <div class="side-by-side"> 141 <div class="test-variant"> 142 <h3>Horizontal-LTR</h3> 143 <div class="container horizontal-tb ltr"> 144 <div class="text-reference">Ref</div> 145 <div class="multicolumn"> 146 <div class="multicolumn-item">A</div> 147 <div class="multicolumn-item">C</div> 148 <div class="multicolumn-item">B</div> 149 <div class="multicolumn-item">D</div> 150 </div> 151 <div class="text-reference">Ref</div> 152 </div> 153 </div> 154 155 <div class="test-variant"> 156 <h3>horizontal-RTL</h3> 157 <div class="container horizontal-tb rtl"> 158 <div class="text-reference">Ref</div> 159 <div class="multicolumn"> 160 <div class="multicolumn-item">A</div> 161 <div class="multicolumn-item">C</div> 162 <div class="multicolumn-item">B</div> 163 <div class="multicolumn-item">D</div> 164 </div> 165 <div class="text-reference">Ref</div> 166 </div> 167 </div> 168 </div> 169 </div> 170 171 <div class="test-section"> 172 <div class="four-column"> 173 <div class="test-variant"> 174 <h3>Vertical RL - LTR</h3> 175 <div class="container vertical-rl ltr"> 176 <div class="text-reference">Ref</div> 177 <div class="multicolumn"> 178 <div class="multicolumn-item">A</div> 179 <div class="multicolumn-item">C</div> 180 <div class="multicolumn-item">B</div> 181 <div class="multicolumn-item">D</div> 182 </div> 183 <div class="text-reference">Ref</div> 184 </div> 185 </div> 186 187 <div class="test-variant"> 188 <h3>Vertical RL - RTL</h3> 189 <div class="container vertical-rl rtl"> 190 <div class="text-reference">Ref</div> 191 <div class="multicolumn"> 192 <div class="multicolumn-item">A</div> 193 <div class="multicolumn-item">C</div> 194 <div class="multicolumn-item">B</div> 195 <div class="multicolumn-item">D</div> 196 </div> 197 <div class="text-reference">Ref</div> 198 </div> 199 </div> 200 201 <div class="test-variant"> 202 <h3>Vertical LR - LTR</h3> 203 <div class="container vertical-lr ltr"> 204 <div class="text-reference">Ref</div> 205 <div class="multicolumn"> 206 <div class="multicolumn-item">A</div> 207 <div class="multicolumn-item">C</div> 208 <div class="multicolumn-item">B</div> 209 <div class="multicolumn-item">D</div> 210 </div> 211 <div class="text-reference">Ref</div> 212 </div> 213 </div> 214 215 <div class="test-variant"> 216 <h3>Vertical LR - RTL</h3> 217 <div class="container vertical-lr rtl"> 218 <div class="text-reference">Ref</div> 219 <div class="multicolumn"> 220 <div class="multicolumn-item">A</div> 221 <div class="multicolumn-item">C</div> 222 <div class="multicolumn-item">B</div> 223 <div class="multicolumn-item">D</div> 224 </div> 225 <div class="text-reference">Ref</div> 226 </div> 227 </div> 228 </div> 229 </div> 230 </body> 231 </html>