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