grid-percent-rows-spanned-shrinkwrap-001.html (1310B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Spanned 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-spanned-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 justify-content: center; 17 border: solid silver; 18 font: 20px/1 Ahem; 19 color: transparent; 20 } 21 .grid > div { 22 background: blue; 23 } 24 .b { 25 grid-row: 3; 26 } 27 .c { 28 grid-row: span 3; 29 } 30 31 .ref { 32 grid-template-rows: 40px 20px 40px; 33 } 34 </style> 35 36 <p>Test passes if the two shapes below are identical 37 38 <div class="grid"> 39 <div class="a">X</div> 40 <div class="b">X</div> 41 <div class="c">X<br>X<br>X<br>X<br>X</div> 42 </div> 43 44 <div class="grid ref"> 45 <div class="a">X</div> 46 <div class="b">X</div> 47 <div class="c">X<br>X<br>X<br>X<br>X</div> 48 </div>