grid-item-overflow-stretch-004-ref.html (2504B)
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 Reference: stretching items</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 12 13 .grid { 14 display: inline-grid; 15 width: 90px; 16 height: 50px; 17 grid: 7px 30px 3px / 7px 102px 3px; 18 grid-gap: 5px; 19 border:1px solid; 20 } 21 .c2 { grid: 7px 30px 3px / 7px 112px 3px; grid-gap: 5px;} 22 .c3 { grid: 7px 30px 3px / 7px 70px 3px; grid-gap: 5px;} 23 24 .grid > * { 25 grid-area: 2/2; 26 border:1px solid; 27 min-width: 0; 28 max-width: 100px; 29 } 30 .h .grid > * { 31 min-height: 0; 32 max-height: 100px; 33 justify-self: safe center; 34 align-self: safe center; 35 } 36 .h > .grid { grid: 7px 30px 3px / 7px 70px 3px; grid-gap: 5px; } 37 38 .oa { overflow: auto; } 39 .p { width: 100%; } 40 .h .grid > .p { height: 100%; } 41 .x { width:5px; } 42 .h .grid > .x { max-height:5px; } 43 .m { margin: 1px 3px 5px 7px; } 44 45 x { display:block; width:110px; height:5px; background:grey; } 46 .h .grid x { width:5px; height:110px; } 47 48 br { clear:both; } 49 </style> 50 </head> 51 <body> 52 53 <div class="grid c3"><span class="p oa"><x></x></span></div> 54 <div class="grid c3"><span class="p "><x></x></span></div> 55 <div class="grid c2"><span class="p x" style="height:5px; margin-left:31.5px; margin-top:11.5px"><x></x></span></div> 56 <div class="grid c2"><span class=" " style="width:68px"><x></x></span></div> 57 58 <br> 59 60 <div class="grid c3"><span class="p m oa"><x></x></span></div> 61 <div class="grid c3"><span class="p m"><x></x></span></div> 62 <div class="grid c2"><span class="m p x"><x></x></span></div> 63 <div class="grid c2"><span class="m " style="width:58px"><x></x></span></div> 64 65 <br> 66 67 <div class="h"> 68 69 <div class="grid"><span class="p oa"><x></x></span></div> 70 <div class="grid"><span class="p "><x></x></span></div> 71 <div class="grid"><span class="p x" style=""><x></x></span></div> 72 <div class="grid"><span class=" " style="height:28px; width:68px;"><x></x></span></div> 73 74 <br> 75 76 <div class="grid"><span class="m p oa"><x></x></span></div> 77 <div class="grid"><span class="m p"><x></x></span></div> 78 <div class="grid"><span class="m p x" style="justify-self:start;align-self:start"><x></x></span></div> 79 <div class="grid"><span class="m " style="height:22px; width:58px"><x></x></span></div> 80 81 <br> 82 83 </div> 84 85 </body> 86 </html>