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