contain-intrinsic-size-025.html (1415B)
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 <link rel="match" href="contain-intrinsic-size-025-ref.html"> 7 <meta name="assert" content="definite size auto-fit uses intrinsic-size for the available space"> 8 9 <style> 10 .grid { 11 border: 3px solid black; 12 display: grid; 13 contain-intrinsic-size: 70px 80px; 14 contain: size; 15 width: max-content; 16 background: lightblue; 17 grid-gap: 5px; 18 } 19 .one { 20 grid-template: repeat(auto-fit, 10px) / 3fr 4fr; 21 } 22 .two { 23 grid-template: 1fr 2fr / repeat(auto-fit, 15px); 24 } 25 .three { 26 grid-template: repeat(auto-fit, 10px) / repeat(auto-fit, 15px); 27 } 28 29 .item { 30 background: green; 31 height: 100%; 32 } 33 </style> 34 35 <div class="grid one"> 36 <div class=item></div> 37 <div class=item></div> 38 <div class=item></div> 39 <div class=item></div> 40 <div class=item></div> 41 <div class=item></div> 42 </div> 43 <div class="grid two"> 44 <div class=item></div> 45 <div class=item></div> 46 <div class=item></div> 47 <div class=item></div> 48 <div class=item></div> 49 <div class=item></div> 50 </div> 51 <div class="grid three"> 52 <div class=item></div> 53 <div class=item></div> 54 <div class=item></div> 55 <div class=item></div> 56 <div class=item></div> 57 <div class=item></div> 58 </div>