row-gaps-001-ref.html (1246B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 5 <style> 6 .grid { 7 display: grid; 8 background: gray; 9 grid-template-rows: repeat(3, 100px); 10 height: 400px; 11 width: 380px; 12 padding: 20px; 13 gap: 50px 10px; 14 } 15 16 .grid > div { 17 width: 100px; 18 grid-column: 1; 19 } 20 21 .auto-item { 22 padding: 10px; 23 } 24 25 .auto-item:nth-of-type(1) { 26 background: lightskyblue; 27 } 28 29 .auto-item:nth-of-type(2) { 30 background: lightcoral; 31 } 32 33 .auto-item:nth-of-type(3) { 34 background: lightgreen; 35 } 36 37 .two-track-spanner { 38 background: lightpink; 39 grid-row: 1 / span 2; 40 padding: 10px; 41 } 42 </style> 43 <body> 44 <p>Test that gaps are correctly used within grid-lanes containers.</p> 45 <div class="grid"> 46 <div class="auto-item">This is some text</div> 47 <div class="auto-item">Some larger words in this sentence</div> 48 <div class="auto-item">The cat cannot be separated from milk</div> 49 <div class="two-track-spanner" style="grid-column: 2;">The cat still cannot be separated from milk</div> 50 <div class="two-track-spanner" style="grid-column: 3;">The cat still cannot be separated from milk</div> 51 </div> 52 </body> 53 </html>