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