grid-lanes-track-sizing-span-row.html (1080B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Grid Test: Verify that fully spanning blocks take presedence over indefinite ones.</title> 7 <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing"> 9 <link rel="match" href="grid-lanes-track-sizing-span-row-ref.html"> 10 </head> 11 12 <body> 13 <style> 14 grid { 15 display: grid-lanes; 16 grid-template-columns: 50px 1fr; 17 width: 300px; 18 height: 100px; 19 } 20 21 box1 { 22 height: 50px; 23 width: 50px; 24 background-color: blue; 25 } 26 27 box2 { 28 height: 50px; 29 background-color: red; 30 } 31 32 box3 { 33 width: 100px; 34 height: 50px; 35 background-color: purple; 36 z-index: 1; 37 } 38 39 box4 { 40 height: 50px; 41 width: 300px; 42 grid-column: span 2; 43 background-color: green; 44 } 45 </style> 46 47 <grid> 48 <box1>1</box1> 49 <box2>2</box2> 50 <box4>4</box4> 51 <box3>3</box3> 52 </grid> 53 54 </body> 55 </html>