column-gaps-001.html (1244B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="match" href="column-gaps-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-template-columns: repeat(3, 100px); 13 width: 400px; 14 padding: 20px; 15 gap: 10px 50px; 16 } 17 18 .auto-item { 19 padding: 10px; 20 } 21 22 .auto-item:nth-of-type(1) { 23 background: lightskyblue; 24 } 25 26 .auto-item:nth-of-type(2) { 27 background: lightcoral; 28 } 29 30 .auto-item:nth-of-type(3) { 31 background: lightgreen; 32 } 33 34 .two-track-spanner { 35 background: lightpink; 36 grid-column: span 2; 37 padding: 10px; 38 } 39 </style> 40 <body> 41 <p>Test that gaps are correctly used within grid-lanes containers.</p> 42 <div class="grid-lanes"> 43 <div class="auto-item">This is some text</div> 44 <div class="auto-item">Some larger words in this sentence</div> 45 <div class="auto-item">The cat cannot be separated from milk</div> 46 <div class="two-track-spanner">The cat still cannot be separated from milk</div> 47 <div class="two-track-spanner">The cat still cannot be separated from milk</div> 48 </div> 49 </body> 50 </html>