auto-track-sizing-001-ref.html (1551B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: subgrid auto track sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1558705"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid { 16 display: grid; 17 max-width: 260px; 18 padding: 1px 5px; 19 border: 1px solid; 20 } 21 .subgrid { 22 display: grid; 23 padding: 3px 5px 7px 11px; 24 border-style: solid; 25 border-width: 5px 7px 11px 3px; 26 margin: 7px 11px 3px 5px; 27 background: grey; 28 } 29 30 </style> 31 </head> 32 <body> 33 34 <article class="grid"> 35 <div class="subgrid"> 36 The cat can not be separated from milk 37 </div> 38 </article> 39 40 <article class="grid" style="grid-template-columns: 100px auto"> 41 <div class="subgrid"> 42 The cat can not be separated from milk 43 </div> 44 </article> 45 46 <article class="grid" style="grid-template-columns: auto 100px"> 47 <div class="subgrid" style="grid-column:2"> 48 The cat can not be separated from milk 49 </div> 50 </article> 51 52 <article class="grid" style="grid-template-columns: auto 100px auto"> 53 <div class="subgrid" style="grid-column:2 / span 2"> 54 The cat can not be separated from milk 55 </div> 56 </article> 57 58 <article class="grid" style="grid-template-columns: auto 100px auto"> 59 <div class="subgrid" style="grid-column:1 / span 3"> 60 The cat can not be separated from milk 61 </div> 62 </article> 63 64 </body> 65 </html>