subgrid-stretch.html (2481B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: The subgrid is always stretched in its subgridded dimension(s)</title> 5 <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment"> 7 <link rel="match" href="subgrid-stretch-ref.html"> 8 <style> 9 body { 10 margin: 0; 11 } 12 .grid { 13 display: inline-grid; 14 grid-template-columns: 100px; 15 grid-template-rows: 100px; 16 } 17 .subgrid { 18 display: grid; 19 background-color: blue; 20 } 21 .rows { 22 grid-template-rows: subgrid; 23 align-self: baseline; 24 } 25 .columns { 26 grid-template-columns: subgrid; 27 justify-self: baseline; 28 } 29 .vrl { 30 writing-mode: vertical-rl; 31 } 32 .vrl.rows { 33 align-self: initial; 34 justify-self: baseline; 35 } 36 .vrl.columns { 37 justify-self: initial; 38 align-self: baseline; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="grid"> 44 <div class="subgrid rows" style="height: 50px;"></div> 45 </div> 46 <div class="grid"> 47 <div class="subgrid rows" style="height: 150px;"></div> 48 </div> 49 <div class="grid"> 50 <div class="subgrid rows" style="max-height: 50px;"></div> 51 </div> 52 <div class="grid"> 53 <div class="subgrid rows" style="min-height: 150px;"></div> 54 </div> 55 <div class="grid"> 56 <div class="subgrid columns" style="width: 50px;"></div> 57 </div> 58 <div class="grid"> 59 <div class="subgrid columns" style="width: 150px;"></div> 60 </div> 61 <div class="grid"> 62 <div class="subgrid columns" style="max-width: 50px;"></div> 63 </div> 64 <div class="grid"> 65 <div class="subgrid columns" style="min-width: 150px;"></div> 66 </div> 67 68 <br> 69 70 <div class="grid"> 71 <div class="subgrid vrl rows" style="width: 50px;"></div> 72 </div> 73 <div class="grid"> 74 <div class="subgrid vrl rows" style="width: 150px;"></div> 75 </div> 76 <div class="grid"> 77 <div class="subgrid vrl rows" style="max-width: 50px;"></div> 78 </div> 79 <div class="grid"> 80 <div class="subgrid vrl rows" style="min-width: 150px;"></div> 81 </div> 82 <div class="grid"> 83 <div class="subgrid vrl columns" style="height: 50px;"></div> 84 </div> 85 <div class="grid"> 86 <div class="subgrid vrl columns" style="height: 150px;"></div> 87 </div> 88 <div class="grid"> 89 <div class="subgrid vrl columns" style="max-height: 50px;"></div> 90 </div> 91 <div class="grid"> 92 <div class="subgrid vrl columns" style="min-height: 150px;"></div> 93 </div> 94 95 </body> 96 </html>