contain-intrinsic-size-023.html (835B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: grid indefinite size</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-023-ref.html"> 7 <meta name="assert" content="grid container is sized by intrinsic-size, with fr-tracks using that space"> 8 9 <style> 10 #grid { 11 border: 3px solid black; 12 display: grid; 13 grid-template: 1fr 2fr / 3fr 4fr; 14 contain-intrinsic-size: 70px 80px; 15 contain: size; 16 width: max-content; 17 background: lightblue; 18 grid-gap: 5px; 19 } 20 .item { 21 background: lightgreen; 22 height: 100%; 23 } 24 </style> 25 26 <div id=grid> 27 <div class=item></div> 28 <div class=item></div> 29 <div class=item></div> 30 <div class=item></div> 31 </div>