grid-percent-cols-spanned-shrinkwrap-001-ref.html (874B)
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-columns: 40px 20px 40px; 11 align-content: center; 12 border: solid silver; 13 font: 20px/1 Ahem; 14 color: transparent; 15 } 16 .grid > div { 17 background: blue; 18 } 19 .b { 20 grid-column: 3; 21 } 22 .c { 23 grid-column: span 3; 24 } 25 </style> 26 27 <p>Test passes if the two shapes below are identical 28 29 <div class="grid"> 30 <div class="a">X</div> 31 <div class="b">X</div> 32 <div class="c">XXXXX</div> 33 </div> 34 35 <div class="grid ref"> 36 <div class="a">X</div> 37 <div class="b">X</div> 38 <div class="c">XXXXX</div> 39 </div>