column-grid-lanes-container-baseline-007a.html (3679B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: align-items: baseline/last baseline with explicit placement</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-007a-ref.html"> 9 <style> 10 .container { 11 display: flex; 12 gap: 20px; 13 border: 2px solid blue; 14 width: 400px; 15 padding: 10px; 16 font-size: 16px; 17 text-decoration: underline; 18 } 19 20 .first-baseline { 21 align-items: baseline; 22 } 23 24 .last-baseline { 25 align-items: last baseline; 26 } 27 28 .grid-lanes-margin { 29 display: grid-lanes; 30 grid-template-columns: repeat(3, 100px); 31 border: 1px solid blue; 32 background: lightblue; 33 } 34 35 .grid-lanes-margin .grid-lanes-item { 36 font-size: 14px; 37 padding: 4px; 38 } 39 40 .grid-lanes-margin .item1 { 41 grid-column: 1; 42 height: 30px; 43 margin-top: 5px; 44 background: lightgreen; 45 } 46 47 .grid-lanes-margin .item2 { 48 grid-column: 1 / 4; 49 height: 40px; 50 margin-top: 10px; 51 background: lightcoral; 52 } 53 54 .grid-lanes-margin .item3 { 55 grid-column: 1; 56 height: 25px; 57 margin-top: 8px; 58 background: lightyellow; 59 } 60 61 .grid-lanes-margin .item4 { 62 grid-column: 2; 63 height: 35px; 64 margin-top: 12px; 65 background: lightpink; 66 } 67 68 .grid-lanes-margin .item5 { 69 grid-column: 3; 70 height: 20px; 71 margin-top: 15px; 72 background: lightcyan; 73 display: flex; 74 align-items: end; 75 } 76 77 .grid-lanes-simple { 78 display: grid-lanes; 79 grid-template-columns: repeat(3, 100px); 80 border: 1px solid green; 81 } 82 83 .grid-lanes-simple .simple-item1 { 84 grid-column: 1 / 4; 85 height: 2px; 86 font-size: 40px; 87 background: yellow; 88 } 89 90 .grid-lanes-simple .simple-item2 { 91 grid-column: 1; 92 height: 2px; 93 font-size: 12px; 94 border: 2px solid red; 95 color: red; 96 } 97 98 .grid-lanes-simple .simple-item3 { 99 grid-column: 1; 100 height: 80px; 101 color: blue; 102 display: flex; 103 align-items: end; 104 } 105 </style> 106 </head> 107 <body> 108 <div class="container first-baseline"> 109 <div>Ref</div> 110 <div class="grid-lanes-margin"> 111 <div class="grid-lanes-item item1">Item 1</div> 112 <div class="grid-lanes-item item2">Item 2</div> 113 <div class="grid-lanes-item item3">Item 3</div> 114 <div class="grid-lanes-item item4">Item 4</div> 115 <div class="grid-lanes-item item5">Item 5</div> 116 </div> 117 </div> 118 <div class="container last-baseline"> 119 <div>Ref</div> 120 <div class="grid-lanes-margin"> 121 <div class="grid-lanes-item item1">Item 1</div> 122 <div class="grid-lanes-item item2">Item 2</div> 123 <div class="grid-lanes-item item3">Item 3</div> 124 <div class="grid-lanes-item item4">Item 4</div> 125 <div class="grid-lanes-item item5">Item 5</div> 126 </div> 127 </div> 128 129 <!-- Spanner with large font vs smaller item below --> 130 <div class="container first-baseline"> 131 <div>Ref</div> 132 <div class="grid-lanes-simple"> 133 <div class="grid-lanes-item simple-item1">First</div> 134 <div class="grid-lanes-item simple-item2">Second</div> 135 <div class="grid-lanes-item simple-item3">Third</div> 136 </div> 137 </div> 138 <div class="container last-baseline"> 139 <div>Ref</div> 140 <div class="grid-lanes-simple"> 141 <div class="grid-lanes-item simple-item1">First</div> 142 <div class="grid-lanes-item simple-item2">Second</div> 143 <div class="grid-lanes-item simple-item3">Third</div> 144 </div> 145 </div> 146 </body> 147 </html>