row-auto-placement-001.html (1546B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="match" href="row-auto-placement-001-ref.html"> 5 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 background: gray; 10 position: relative; 11 flow-tolerance: 0; 12 grid-lanes-direction: row; 13 grid-template-rows: auto auto auto; 14 width: 300px; 15 padding: 10px; 16 } 17 18 .first-track { 19 background: lightskyblue; 20 grid-row-start: 1; 21 } 22 23 .second-track { 24 background: lightcoral; 25 grid-row-start: 2; 26 } 27 28 .third-track { 29 background: lightgreen; 30 grid-row-start: 3; 31 } 32 33 .square-100x100 { 34 width: 100px; 35 height: 100px; 36 } 37 </style> 38 <body> 39 <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> 40 <div class="grid-lanes"> 41 <div class="first-track square-100x100" style="margin-right: 40px;"> 42 Number 1 43 </div> 44 <div class="second-track square-100x100" style="margin-bottom: 10px;"> 45 Number 2 46 </div> 47 <div class="third-track square-100x100" style="margin-right: 40px;"> 48 Number 3 49 </div> 50 <div class="square-100x100" style="background-color: lightpink;"> 51 Number 4 52 </div> 53 <div class="square-100x100" style="background-color: lightpink; margin-left: -20px;"> 54 Number 5 55 </div> 56 <div style="grid-row: span 2; background: brown; width: 100px;"> 57 Number 6 58 </div> 59 </div> 60 </body> 61 </html>