row-align-items-center-001-ref.html (804B)
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: center; 11 } 12 </style> 13 <body> 14 <p>Test that using align-items centers each item to the grid-axis track it is on.</p> 15 <div class="grid"> 16 <div style="width: 50px; height: 50px; background-color: lightblue;"></div> 17 <div style="background-color: lightpink; height: 80px; width: 200px; grid-row: span 2;"></div> 18 <div style="width: 100px; height: 15px; background-color: lightsalmon;"></div> 19 <div style="width: 25px; height: 25px; background-color: plum;"></div> 20 <div style="background-color: lightgreen; width: 60px; height: 60px; transform: translateX(-75px);"></div> 21 </div> 22 </body> 23 </html>