column-grid-lanes-container-baseline-004b-ref.html (4227B)
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 .four-column { 14 display: flex; 15 gap: 15px; 16 align-items: flex-start; 17 } 18 19 .test-variant { 20 flex: 1; 21 border: 1px solid #ccc; 22 padding: 8px; 23 background: #fafafa; 24 } 25 26 .container { 27 display: flex; 28 align-items: baseline; 29 gap: 10px; 30 border: 1px solid blue; 31 padding: 5px; 32 margin: 5px 0; 33 background: #f9f9f9; 34 text-decoration: underline; 35 } 36 37 .multicolumn { 38 column-count: 2; 39 column-width: 50px; 40 column-gap: 0px; 41 height: 120px; 42 border: 1px solid red; 43 background: white; 44 display: inline-block; 45 } 46 47 .multicolumn-item { 48 background: lightblue; 49 padding: 4px; 50 border: 1px solid navy; 51 font-size: 12px; 52 text-align: center; 53 break-inside: avoid; 54 width: 40px; 55 height: auto; 56 min-height: 20px; 57 } 58 59 .multicolumn-item:last-child { 60 margin-bottom: 0; 61 } 62 63 .text-reference { 64 writing-mode: inherit; 65 height: 60px; 66 width: 25px; 67 display: flex; 68 align-items: center; 69 justify-content: center; 70 font-size: 12px; 71 background: yellow; 72 padding: 6px; 73 font-weight: bold; 74 } 75 76 .multicolumn-item:nth-child(1) { 77 height: 25px; 78 background: lightcoral; 79 font-size: 10px; 80 display: flex; 81 align-items: flex-start; 82 } 83 84 .multicolumn-item:nth-child(3) { 85 height: 35px; 86 background: lightgreen; 87 font-size: 16px; 88 display: flex; 89 align-items: center; 90 } 91 92 .multicolumn-item:nth-child(2) { 93 height: 30px; 94 background: lightpink; 95 font-size: 12px; 96 display: flex; 97 align-items: flex-end; 98 } 99 100 .multicolumn-item:nth-child(4) { 101 height: 40px; 102 background: lightyellow; 103 font-size: 14px; 104 display: flex; 105 align-items: flex-start; 106 } 107 108 .sideways-rl { writing-mode: sideways-rl; } 109 .sideways-lr { writing-mode: sideways-lr; } 110 111 .ltr { direction: ltr; } 112 .rtl { direction: rtl; } 113 </style> 114 </head> 115 <body> 116 <div class="test-section"> 117 <div class="four-column"> 118 <div class="test-variant"> 119 <h3>Sideways RL - LTR</h3> 120 <div class="container sideways-rl ltr"> 121 <div class="text-reference">Ref</div> 122 <div class="multicolumn"> 123 <div class="multicolumn-item">A</div> 124 <div class="multicolumn-item">C</div> 125 <div class="multicolumn-item">B</div> 126 <div class="multicolumn-item">D</div> 127 </div> 128 <div class="text-reference">Ref</div> 129 </div> 130 </div> 131 132 <div class="test-variant"> 133 <h3>Sideways RL - RTL</h3> 134 <div class="container sideways-rl rtl"> 135 <div class="text-reference">Ref</div> 136 <div class="multicolumn"> 137 <div class="multicolumn-item">A</div> 138 <div class="multicolumn-item">C</div> 139 <div class="multicolumn-item">B</div> 140 <div class="multicolumn-item">D</div> 141 </div> 142 <div class="text-reference">Ref</div> 143 </div> 144 </div> 145 146 <div class="test-variant"> 147 <h3>Sideways LR - LTR</h3> 148 <div class="container sideways-lr ltr"> 149 <div class="text-reference">Ref</div> 150 <div class="multicolumn"> 151 <div class="multicolumn-item">A</div> 152 <div class="multicolumn-item">C</div> 153 <div class="multicolumn-item">B</div> 154 <div class="multicolumn-item">D</div> 155 </div> 156 <div class="text-reference">Ref</div> 157 </div> 158 </div> 159 160 <div class="test-variant"> 161 <h3>Sideways LR - RTL</h3> 162 <div class="container sideways-lr rtl"> 163 <div class="text-reference">Ref</div> 164 <div class="multicolumn"> 165 <div class="multicolumn-item">A</div> 166 <div class="multicolumn-item">C</div> 167 <div class="multicolumn-item">B</div> 168 <div class="multicolumn-item">D</div> 169 </div> 170 <div class="text-reference">Ref</div> 171 </div> 172 </div> 173 </div> 174 </div> 175 </body> 176 </html>