grid-abspos-items-013-ref.html (3134B)
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>Reference: grid abs.pos. child in grid with gutters</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230695"> 10 <style type="text/css"> 11 body { width:800px; } 12 13 .grid { 14 display: block; 15 position: relative; 16 grid-template-columns: repeat(5, 20px); 17 grid-auto-rows: 10px; 18 grid-gap: 100px 10px; 19 border: 1px solid; 20 padding: 0 3px 0 5px; 21 height: 40px; 22 margin-bottom: 2px; 23 } 24 .grid.r { 25 grid-template-columns: 20px; 26 grid-template-rows: repeat(5, 20px); 27 height: 160px; 28 padding: 2px 3px 4px 5px; 29 float: left; 30 min-width: 70px; 31 margin-right: 2px; 32 } 33 34 x { 35 position: absolute; 36 width: 20px; 37 height: 10px; 38 background: lime; 39 } 40 41 a { 42 position: absolute; 43 left:0; right:0; bottom:20px; height: 3px; 44 background: black; 45 } 46 b { 47 position: absolute; 48 left:0; right:0; bottom:10px; height: 3px; 49 background: grey; 50 } 51 c { 52 position: absolute; 53 left:0; right:0; bottom:0; height: 3px; 54 background: blue; 55 } 56 57 .r a { 58 left:50px; top:0; bottom:0; width: 3px; height:auto; 59 } 60 .r b { 61 left:40px; top:0; bottom:0; width: 3px; height:auto; 62 } 63 .r c { 64 left:30px; top:0; bottom:0; width: 3px; height:auto; 65 } 66 67 x:nth-of-type(1) { left:5px; } 68 x:nth-of-type(2) { left:125px; } 69 x:nth-of-type(3) { left:245px; } 70 x:nth-of-type(4) { left:365px; } 71 72 .r x { left:5px; height:20px; } 73 .r x:nth-of-type(1) { top:2px; } 74 .r x:nth-of-type(2) { top:32px; } 75 .r x:nth-of-type(3) { top:62px; } 76 .r x:nth-of-type(4) { top:92px; } 77 78 .s x:nth-of-type(1) { left:120px; } 79 .s x:nth-of-type(2) { left:255px; } 80 .s x:nth-of-type(3) { left:390px; } 81 .s x:nth-of-type(4) { left:525px; } 82 83 </style> 84 </head> 85 <body> 86 87 <div class="grid"> 88 <x></x><x></x><x></x><x></x> 89 <a style="left:125px; width:140px"></a><b style="width:265px"></b><c style="left:365px"></c> 90 </div> 91 92 <div class="grid"> 93 <x></x><x></x><x></x><x></x> 94 <a style="left:5px; width:260px"></a><b style="width:5px"></b><c style="left:5px"></c> 95 </div> 96 97 <div class="grid"> 98 <x></x><x></x><x></x><x></x> 99 <a style="left:505px"></a><b style="width:505px"></b><c style="left:505px"></c> 100 </div> 101 102 <div class="grid s"> 103 <x></x><x></x><x></x><x></x> 104 <a style="left:255px; width:155px"></a><b style="width:410px"></b><c style="left:525px"></c> 105 </div> 106 107 <div class="grid s"> 108 <x></x><x></x><x></x><x></x> 109 <a style="left:120px; width:290px"></a><b style="width:120px"></b><c style="left:120px"></c> 110 </div> 111 112 <div class="grid s"> 113 <x></x><x></x><x></x><x></x> 114 <a style="left:680px"></a><b style="width:680px"></b><c style="left:680px"></c> 115 </div> 116 117 <div class="grid r"> 118 <x></x><x></x><x></x><x></x> 119 <a style="top:32px; height:50px"></a><b style="height:82px"></b><c style="top:92px"></c> 120 </div> 121 122 <div class="grid r"> 123 <x></x><x></x><x></x><x></x> 124 <a style="top:2px; height:80px"></a><b style="height:2px"></b><c style="top:2px"></c> 125 </div> 126 127 <div class="grid r"> 128 <x></x><x></x><x></x><x></x> 129 <a style="top:142px"></a><b style="height:142px"></b><c style="top:142px"></c> 130 </div> 131 132 </body> 133 </html>