row-auto-placement-001-ref.html (1498B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 5 <style> 6 .grid { 7 display: grid; 8 grid-template-rows: 100px auto 100px; 9 align-items: start; 10 background: gray; 11 width: 300px; 12 padding: 10px; 13 } 14 15 .flex { 16 display: flex; 17 flex-direction: row; 18 overflow: visible; 19 flex-wrap: nowrap; 20 align-items: flex-start; 21 } 22 23 .square-100x100 { 24 width: 100px; 25 height: 100px; 26 } 27 </style> 28 <body> 29 <p>Test that grid-lanes items with auto placement are correctly positioned when the grid-axis is the block axis. Ensure that margin affects placement.</p> 30 <div class="grid"> 31 <div class="flex"> 32 <div class="square-100x100" style="background: lightskyblue; margin-right: 100px;"> 33 Number 1 34 </div> 35 <div style="background: brown; width: 100px; height: 210px;"> 36 Number 6 37 </div> 38 </div> 39 <div class="flex"> 40 <div class="square-100x100" style="background: lightcoral; margin-bottom: 10px;"> 41 Number 2 42 </div> 43 <div class="square-100x100" style="background: lightpink; margin-bottom: 10px;"> 44 Number 4 45 </div> 46 </div> 47 <div class="flex"> 48 <div class="square-100x100" style="background: lightgreen; margin-right: 40px;"> 49 Number 3 50 </div> 51 <div class="square-100x100" style="background: lightpink; margin-left: -20px;"> 52 Number 5 53 </div> 54 </div> 55 </div> 56 </body> 57 </html>