grid-percent-rows-spanned-shrinkwrap-001-ref.html (931B)
1 <!DOCTYPE html> 2 <title>Reference</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 4 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 5 <style> 6 .grid { 7 display: grid; 8 float: left; 9 margin: 1em; 10 grid-template-rows: 40px 20px 40px; 11 grid-auto-flow: column; 12 justify-content: center; 13 border: solid silver; 14 font: 20px/1 Ahem; 15 color: transparent; 16 } 17 .grid > div { 18 background: blue; 19 } 20 .b { 21 grid-row: 3; 22 } 23 .c { 24 grid-row: span 3; 25 } 26 </style> 27 28 <p>Test passes if the two shapes below are identical 29 30 <div class="grid"> 31 <div class="a">X</div> 32 <div class="b">X</div> 33 <div class="c">X<br>X<br>X<br>X<br>X</div> 34 </div> 35 36 <div class="grid ref"> 37 <div class="a">X</div> 38 <div class="b">X</div> 39 <div class="c">X<br>X<br>X<br>X<br>X</div> 40 </div>