column-gaps-001-ref.html (1600B)
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 background: gray; 9 grid-template-columns: repeat(3, 100px); 10 width: 400px; 11 gap: 50px; 12 padding: 20px; 13 align-items: start; 14 } 15 16 .flex { 17 display: flex; 18 flex-direction: column; 19 overflow: visible; 20 flex-wrap: nowrap; 21 gap: 10px; 22 } 23 24 .grid-auto-item-1 { 25 background: lightskyblue; 26 width: 80px; 27 padding: 10px; 28 } 29 30 .grid-auto-item-2 { 31 background: lightcoral; 32 width: 80px; 33 padding: 10px; 34 } 35 36 .grid-auto-item-3 { 37 background: lightgreen; 38 width: 80px; 39 padding: 10px; 40 } 41 42 .grid-auto-item-4 { 43 background: lightpink; 44 padding: 10px; 45 width: calc(200% + 30px); 46 transform: translateX(-150px); 47 } 48 </style> 49 <body> 50 <p>Test that gaps are correctly used within grid-lanes containers.</p> 51 <div class="grid"> 52 <div class="flex"> 53 <div class="grid-auto-item-1" style="grid-column: 1">This is some text</div> 54 </div> 55 <div class="flex"> 56 <div class="grid-auto-item-2" style="grid-column: 2">Some larger words in this sentence</div> 57 <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> 58 <div class="grid-auto-item-4" style="grid-column: 2">The cat still cannot be separated from milk</div> 59 </div> 60 <div class="flex"> 61 <div class="grid-auto-item-3" style="grid-column: 3">The cat cannot be separated from milk</div> 62 </div> 63 </div> 64 </body> 65 </html>