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