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