subgrid-item-block-size-001-ref.html (2127B)
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 item auto block-size</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 13 } 14 15 16 body { width:600px; } 17 18 .grid { 19 display: grid; 20 grid-template-columns: repeat(3, 1fr); 21 grid-auto-flow:dense; 22 column-gap: 40px; 23 row-gap: 0px; 24 } 25 26 .card { 27 background-color: #fff; 28 grid-row: auto / span 3; 29 grid-template-rows: repeat(3, auto); 30 grid-template-columns: auto; 31 display: grid; 32 row-gap: 40px; 33 } 34 35 36 .card .inner, .card footer { 37 padding: 10px; 38 } 39 40 .card .inner { background: grey; } 41 42 .card h2 { 43 margin: 0; 44 color: #fff; 45 background-color: rgb(3,99,143); 46 border-bottom: 4px solid rgb(24,154,153); 47 } 48 49 .card footer { 50 background-color: rgb(182,222,211); 51 } 52 53 * { box-sizing: border-box; } 54 55 item { 56 border: 1px solid; 57 visibility: visible; 58 } 59 60 .hidden { visibility: hidden; } 61 </style> 62 <body> 63 64 <div class="grid"> 65 66 <div class="card"> 67 <h2><span class="hidden">My title</span></h2> 68 <div class="inner"> 69 <p>The contents.<span class="hidden"> I have a lot of content, more content than the other ones.</span></p> 70 </div> 71 <footer>Footer contents</footer> 72 </div> 73 74 <div class="card hidden"> 75 <h2 style="grid-area:1/1"><span>My title</span></h2> 76 <div class="inner" style="grid-area:2/1"> 77 <p>The contents. I have a lot of content, more content than the other ones.</p> 78 </div> 79 <footer style="grid-area:3/1">Footer contents</footer> 80 81 <item style="grid-area:1/1">1</item> 82 <item style="grid-area:2/1">2</item> 83 <item style="grid-area:3/1">3</item> 84 85 </div> 86 87 <div class="card"> 88 <h2>My title</h2> 89 <div class="inner"> 90 <p>The contents. I have a lot of content, more content than the other ones.</p> 91 </div> 92 <footer><span class="hidden">Footer contents</span></footer> 93 </div> 94 95 </div> 96 97 </body> 98 </html>