subgrid-item-block-size-001.html (1634B)
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>CSS Grid Test: subgrid item auto block-size</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 11 <link rel="match" href="subgrid-item-block-size-001-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 15 } 16 17 18 body { width:600px; } 19 20 .grid { 21 display: grid; 22 grid-template-columns: repeat(3, 1fr); 23 grid-auto-flow:dense; 24 gap: 40px; 25 } 26 27 .card { 28 background-color: #fff; 29 grid-row: auto / span 3; 30 grid-template-rows: subgrid; 31 grid-template-columns: auto; 32 display: grid; 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 grid-column: 2; 58 } 59 60 </style> 61 <body> 62 63 <div class="grid"> 64 65 <div class="card"> 66 <h2></h2> 67 <div class="inner"> 68 <p>The contents.</p> 69 </div> 70 <footer>Footer contents</footer> 71 </div> 72 73 <item>1</item> 74 <item>2</item> 75 <item>3</item> 76 77 <div class="card"> 78 <h2>My title</h2> 79 <div class="inner"> 80 <p>The contents. I have a lot of content, more content than the other ones.</p> 81 </div> 82 <footer></footer> 83 </div> 84 85 </div> 86 87 </body> 88 </html>