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