grid-item-overflow-stretch-003.html (1928B)
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: margin:auto stretch 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-003-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: 100px; 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 margin: 0 auto; 27 } 28 .h .grid > * { 29 margin: auto; 30 } 31 32 .m { margin: 1px 3px 5px 7px; } 33 34 x { display:block; width:110px; height:5px; background:grey; } 35 .h .grid x { width:5px; height:110px; } 36 37 br { clear:both; } 38 </style> 39 </head> 40 <body> 41 42 <div class="grid"><span class="oa"><x></x></span></div> 43 <div class="grid"><span class="os"><x></x></span></div> 44 <div class="grid"><span class="oh"><x></x></span></div> 45 <div class="grid"><span class=" "><x></x></span></div> 46 47 <br> 48 49 <div class="grid"><span class="m oa"><x></x></span></div> 50 <div class="grid"><span class="m os"><x></x></span></div> 51 <div class="grid"><span class="m oh"><x></x></span></div> 52 <div class="grid"><span class="m "><x></x></span></div> 53 54 <br> 55 56 <div class="h"> 57 58 <div class="grid"><span class="oa"><x></x></span></div> 59 <div class="grid"><span class="os"><x></x></span></div> 60 <div class="grid"><span class="oh"><x></x></span></div> 61 <div class="grid"><span class=" "><x></x></span></div> 62 63 <br> 64 65 <div class="grid"><span class="m oa"><x></x></span></div> 66 <div class="grid"><span class="m os"><x></x></span></div> 67 <div class="grid"><span class="m oh"><x></x></span></div> 68 <div class="grid"><span class="m "><x></x></span></div> 69 70 <br> 71 72 </div> 73 74 </body> 75 </html>