row-align-items-end-align-self-start-001-ref.html (891B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 background: gray; 7 grid-template-rows: repeat(3, 100px); 8 grid-template-columns: 100px auto; 9 width: 300px; 10 align-items: end; 11 } 12 </style> 13 <body> 14 <p>Test that using align-items moves each grid-lanes item to the end of the grid-axis track it is on</p> 15 <p>and that align-self overrides align-items.</p> 16 <div class="grid"> 17 <div style="width: 50px; height: 50px; background-color: lightblue;"></div> 18 <div style="background-color: lightpink; height: 80px; width: 200px; grid-row: span 2;"></div> 19 <div style="width: 100px; height: 15px; background-color: lightsalmon; align-self: start;"></div> 20 <div style="width: 25px; height: 25px; background-color: plum;"></div> 21 <div style="background-color: lightgreen; width: 60px; height: 60px; transform: translateX(-75px);"></div> 22 </div> 23 </body> 24 </html>