grid-percent-cols-filled-shrinkwrap-001.html (1228B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Filled Percentage Column, Shrinkwrap Width (via float)</title> 4 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview"> 5 <link rel="match" href="references/grid-percent-cols-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-columns: auto 20% auto; 15 border: solid silver; 16 font: 20px/1 Ahem; 17 color: transparent; 18 } 19 .grid > div { 20 background: blue; 21 } 22 .b { 23 grid-column: 3; 24 } 25 .c { 26 grid-column: 2; 27 } 28 29 .ref { 30 grid-template-columns: 40px 20px 40px; 31 } 32 </style> 33 34 <p>Test passes if the two shapes below are identical 35 36 <div class="grid"> 37 <div class="a">X</div> 38 <div class="b">X</div> 39 <div class="c">XXX</div> 40 </div> 41 42 <div class="grid ref"> 43 <div class="a">X</div> 44 <div class="b">X</div> 45 <div class="c">XXX</div> 46 </div>