grid-lanes-not-inhibited-001.html (1405B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>CSS Grid Test: Grid Lanes layout shouldn't be inhibited simply due to being an independent formatting context (unlike subgrid)</title> 4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#grid-template-masonry"> 6 <link rel="match" href="grid-lanes-not-inhibited-001-ref.html"> 7 <style> 8 grid { 9 vertical-align: top; 10 display: inline-grid-lanes; 11 grid-template-columns: 60px 60px; 12 border: 2px solid black; 13 } 14 .overflowSet { 15 overflow: hidden; 16 } 17 .containSet { 18 contain: layout; 19 } 20 item { 21 width: 60px; 22 height: 30px; 23 background: cyan; 24 } 25 .tall { 26 /* This item is taller than the others, which lets us know if grid-lanes 27 layout is being applied or not. If we're using grid-lanes, then the second 28 and third items will stack in the same column. If not, then the third 29 item will automatically fill in below this tall item. */ 30 height: 60px; 31 background: tan; 32 } 33 </style> 34 <grid> 35 <item class="tall"></item> 36 <item></item> 37 <item></item> 38 </grid> 39 <grid class="overflowSet"> 40 <item class="tall"></item> 41 <item></item> 42 <item></item> 43 </grid> 44 <grid class="containSet"> 45 <item class="tall"></item> 46 <item></item> 47 <item></item> 48 </grid> 49 <grid class="containSet overflowSet"> 50 <item class="tall"></item> 51 <item></item> 52 <item></item> 53 </grid>