contain-intrinsic-size-025-ref.html (1209B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: grid indefinite size, auto-fit</title> 4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 6 7 <style> 8 .grid { 9 border: 3px solid black; 10 display: grid; 11 width: 70px; 12 height: 80px; 13 box-sizing: content-box; 14 background: lightblue; 15 grid-gap: 5px; 16 } 17 .one { 18 grid-template: repeat(8, 10px) / 3fr 4fr; 19 } 20 .two { 21 grid-template: 1fr 2fr / repeat(3, 15px); 22 } 23 .three { 24 grid-template: repeat(8, 10px) / repeat(3, 15px); 25 } 26 27 .item { 28 background: green; 29 height: 100%; 30 } 31 </style> 32 33 <div class="grid one"> 34 <div class=item></div> 35 <div class=item></div> 36 <div class=item></div> 37 <div class=item></div> 38 <div class=item></div> 39 <div class=item></div> 40 </div> 41 <div class="grid two"> 42 <div class=item></div> 43 <div class=item></div> 44 <div class=item></div> 45 <div class=item></div> 46 <div class=item></div> 47 <div class=item></div> 48 </div> 49 <div class="grid three"> 50 <div class=item></div> 51 <div class=item></div> 52 <div class=item></div> 53 <div class=item></div> 54 <div class=item></div> 55 <div class=item></div> 56 </div>