grid-auto-fit-with-calc.html (632B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#auto-repeat"> 6 <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> 7 <style> 8 .grid { 9 display: grid; 10 width: 100px; 11 grid-template-columns: repeat(auto-fit, minmax(calc(100% - 10px), calc(100% - 100px))); 12 background-color: green; 13 } 14 </style> 15 </head> 16 <body> 17 <p>Test passes if there is a filled green square.</p> 18 <div class="grid"> 19 <div style="height: 50px;"></div> 20 <div style="height: 50px;"></div> 21 </div> 22 </body> 23 </html>