fr-unit.html (2031B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS3 Grid Layout: Flexible Length</title> 5 <link rel="author" title="swain" href="mailto:swainet@126.com"/> 6 <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 --> 7 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/> 8 <link rel="match" href="../reference/fr-unit-ref.html"> 9 <meta name="assert" content="'fr' unit represents a fraction of the free space in the grid container."/> 10 <style type="text/css"> 11 #container { 12 position:relative; 13 width:400px; 14 height:100px; 15 } 16 17 #grid { 18 display:grid; 19 grid-template-columns:100px 1fr; 20 grid-template-rows:30px 1fr; 21 width:100%; 22 height:100%; 23 } 24 25 #cell1 { 26 grid-column:1; 27 grid-row:1; 28 height:30px; 29 } 30 31 #cell2 { 32 grid-column:2; 33 grid-row:1; 34 height:30px; 35 } 36 37 #cell3 { 38 grid-column:1; 39 grid-row:2; 40 height:100%; 41 } 42 43 #cell4 { 44 grid-column:2; 45 grid-row:2; 46 background-color:green; 47 height:100%; 48 } 49 50 .error { 51 position:absolute; 52 top:0; 53 left:0; 54 height:100%; 55 width:100%; 56 z-index:-1; 57 } 58 59 #table { 60 width:100%; 61 height:100%; 62 border-collapse:collapse; 63 } 64 65 #table td { 66 padding:0; 67 vertical-align:top; 68 } 69 70 #table td:first-child { 71 width:100px; 72 } 73 74 #table tr:first-child td { 75 height:30px; 76 } 77 </style> 78 </head> 79 <body> 80 <p>Test passes if there is a green square and no red.</p> 81 82 <div id="container"> 83 <div id="grid"> 84 <div id="cell1">cell1</div> 85 <div id="cell2">cell2</div> 86 <div id="cell3">cell3</div> 87 <div id="cell4">cell4</div> 88 </div> 89 <div class="error"> 90 <table id="table"> 91 <tbody> 92 <tr> 93 <td> </td> 94 <td> </td> 95 </tr> 96 <tr> 97 <td> </td> 98 <td style="background-color:red"> </td> 99 </tr> 100 </tbody> 101 </table> 102 </div> 103 </div> 104 </body> 105 </html>