grid-lanes-track-sizing-explicit-block-ref.html (729B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Grid Reference: Verify definite blocks effect track-sizing algorithm.</title> 7 </head> 8 9 <body> 10 <style> 11 grid { 12 display: grid; 13 grid-template-columns: auto 1fr; 14 grid-template-rows: 50px 50px; 15 width: 300px; 16 height: 100px; 17 } 18 19 box1 { 20 height: 50px; 21 width: 30px; 22 background-color: blue; 23 } 24 25 box2 { 26 height: 50px; 27 background-color: red; 28 } 29 30 box3 { 31 height: 50px; 32 width: 100px; 33 grid-row: 2; 34 grid-column: 1; 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>