grid-lanes-track-sizing-overflow-right-side.html (917B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Grid Test: Verify correct behavior of track-sizing</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-overflow-right-side-ref.html"> 10 </head> 11 12 <body> 13 <style> 14 grid { 15 display: grid-lanes; 16 grid-template-columns: 1fr auto; 17 width: 300px; 18 height: 100px; 19 } 20 21 box1 { 22 width: 1fr; 23 height: 50px; 24 background-color: red; 25 } 26 27 box2 { 28 height: 50px; 29 width: 50px; 30 background-color: blue; 31 } 32 33 box3 { 34 height: 50px; 35 background-color: green; 36 } 37 38 box4 { 39 width: 100px; 40 height: 50px; 41 background-color: purple; 42 z-index: 1; 43 } 44 45 </style> 46 47 <grid> 48 <box1>1</box1> 49 <box2>2</box2> 50 <box3>3</box3> 51 <box4>4</box4> 52 </grid> 53 54 </body> 55 </html>