grid-item-overflow-stretch-003-ref.html (2152B)
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: margin:auto stretch 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: 100px; 16 height: 50px; 17 grid: 7px 30px 3px / 7px 112px 3px; 18 grid-gap: 5px; 19 border:1px solid; 20 } 21 .c2 { grid-template-columns: 7px 122px 3px; } 22 .h > .grid { grid: 7px 112px 3px / 7px 80px 3px; grid-gap: 0; } 23 24 .grid > * { 25 grid-area: 2/2; 26 border:1px solid; 27 margin: 0 auto; 28 justify-self:start; 29 align-self:start; 30 height:28px; 31 } 32 .c2 > * { height:22px; } 33 .h .grid > * { 34 margin: 10px 0 0 10px; 35 justify-self:center; 36 align-self:center; 37 width:5px; 38 height:110px; 39 } 40 41 .m { margin: 1px 3px 5px 7px; } 42 43 x { display:block; width:110px; height:5px; background:grey; } 44 .h .grid x { width:5px; height:110px; } 45 46 br { clear:both; } 47 </style> 48 </head> 49 <body> 50 51 <div class="grid"><span class="oa"><x></x></span></div> 52 <div class="grid"><span class="os"><x></x></span></div> 53 <div class="grid"><span class="oh"><x></x></span></div> 54 <div class="grid"><span class=" "><x></x></span></div> 55 56 <br> 57 58 <div class="grid c2"><span class="m oa"><x></x></span></div> 59 <div class="grid c2"><span class="m os"><x></x></span></div> 60 <div class="grid c2"><span class="m oh"><x></x></span></div> 61 <div class="grid c2"><span class="m "><x></x></span></div> 62 63 <br> 64 65 <div class="h"> 66 67 <div class="grid"><span class="oa"><x></x></span></div> 68 <div class="grid"><span class="os"><x></x></span></div> 69 <div class="grid"><span class="oh"><x></x></span></div> 70 <div class="grid"><span class=" "><x></x></span></div> 71 72 <br> 73 74 <div class="grid"><span class="m oa"><x></x></span></div> 75 <div class="grid"><span class="m os"><x></x></span></div> 76 <div class="grid"><span class="m oh"><x></x></span></div> 77 <div class="grid"><span class="m "><x></x></span></div> 78 79 <br> 80 81 </div> 82 83 </body> 84 </html>