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