grid-percent-rows-filled-shrinkwrap-001.html (1240B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Filled Percentage Row, Shrinkwrap Height</title> 4 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview"> 5 <link rel="match" href="references/grid-percent-rows-filled-shrinkwrap-001-ref.html"> 6 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <style> 10 .grid { 11 display: grid; 12 float: left; 13 margin: 1em; 14 grid-template-rows: auto 20% auto; 15 grid-auto-flow: column; 16 border: solid silver; 17 font: 20px/1 Ahem; 18 color: transparent; 19 } 20 .grid > div { 21 background: blue; 22 } 23 .b { 24 grid-row: 3; 25 } 26 .c { 27 grid-row: 2; 28 } 29 30 .ref { 31 grid-template-rows: 40px 20px 40px; 32 } 33 </style> 34 35 <p>Test passes if the two shapes below are identical 36 37 <div class="grid"> 38 <div class="a">X</div> 39 <div class="b">X</div> 40 <div class="c">X<br>X<br>X</div> 41 </div> 42 43 <div class="grid ref"> 44 <div class="a">X</div> 45 <div class="b">X</div> 46 <div class="c">X</div> 47 </div>