row-overflow-alignment-001-ref.html (1040B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <style> 5 .grid { 6 display: grid; 7 background: gray; 8 grid-template-rows: 70px; 9 grid-template-columns: 75px 50px 75px 100px; 10 align-items: unsafe center; 11 width: 300px; 12 height: 70px; 13 } 14 .overflow-safe { 15 align-self: safe end; 16 width: 75px; 17 height: 75px; 18 background-color: lightgreen; 19 } 20 .overflow-unsafe { 21 align-self: unsafe end; 22 width: 75px; 23 height: 75px; 24 background-color: lightblue; 25 } 26 .small-item { 27 width: 50px; 28 background-color: lightyellow; 29 } 30 </style> 31 <body> 32 <p>Test that overflow safe and unsafe are working as expected. 33 <div class="grid"> 34 <div class="overflow-safe"> 35 Overflow safe 36 </div> 37 <div style="width: 50px; background-color: lightpink;"> 38 Regular item 39 </div> 40 <div class="overflow-unsafe"> 41 Overflow unsafe 42 </div> 43 <div style="height: 150px; width: 100px; background-color: brown"> 44 Overflow center 45 </div> 46 </div> 47 </body> 48 </html>