grid-abspos-items-002.html (3608B)
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 <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> 9 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> 10 <link rel="match" href="grid-abspos-items-002-ref.html"> 11 <meta charset="utf-8"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 transform: translate(1px,2px); 18 border: 1px solid; 19 grid-auto-flow: row; 20 grid-auto-columns: 23px; 21 grid-auto-rows: 7px; 22 padding: 17px 7px 11px 13px; 23 width: 100px; 24 height: 60px; 25 } 26 .zero-size { width:0; height:0; } 27 .auto-size { width:auto; height:auto; } 28 29 .a { 30 grid-column: 1 / 3; 31 grid-row: 3 / 5; 32 background: blue; 33 } 34 35 .abs { 36 position: fixed; 37 top:3px; left:1px; right:5px; bottom:1px; 38 opacity: 0.7; 39 } 40 .b { 41 grid-column: auto / 2; 42 grid-row: auto / auto; 43 } 44 .c { 45 grid-column: 9 / auto; /* 9 is outside the grid */ 46 grid-row: 9 / auto; /* 9 is outside the grid */ 47 } 48 .d { 49 grid-column: auto / 1; 50 grid-row: 2 / 1; 51 } 52 .e { 53 grid-column: 4 / auto; 54 grid-row: 3 / auto; 55 } 56 .f { 57 grid-column: 4 / auto; 58 grid-row: auto / 1; 59 } 60 .g { 61 grid-column: 1 / 3; 62 grid-row: 2 / 3; 63 } 64 .h { 65 grid-column: auto / auto; 66 grid-row: auto / auto; 67 } 68 .i { 69 grid-column: span 1 / span 2; 70 grid-row: span 2 / span A; 71 background: lime; 72 } 73 .j { 74 grid-column: span A / span 2; 75 grid-row: span 2 / span 1; 76 background: lime; 77 } 78 span { 79 background: lime; 80 border: 1px solid; 81 } 82 </style> 83 </head> 84 <body> 85 86 <div style="float:left"> 87 88 <div class="grid"> 89 <span class="a"></span> 90 <span class="b abs">b</span> 91 </div> 92 93 <div class="grid"> 94 <span class="a"></span> 95 <span class="c abs">c</span> 96 </div> 97 98 <div class="grid"> 99 <span class="a"></span> 100 <span class="d abs">d</span> 101 </div> 102 103 <div class="grid"> 104 <span class="a"></span> 105 <span class="e abs">e</span> 106 </div> 107 108 <div class="grid"> 109 <span class="a"></span> 110 <span class="f abs">f</span> 111 </div> 112 113 <div class="grid"> 114 <span class="a"></span> 115 <span class="g abs">g</span> 116 </div> 117 118 </div><div style="float:left"> 119 120 <div class="grid"> 121 <span class="a"></span> 122 <div><span class="b abs">b</span></div> 123 </div> 124 125 <div class="grid"> 126 <span class="a"></span> 127 <x><span class="c abs">c</span></x> 128 </div> 129 130 <div class="grid"> 131 <span class="a"></span> 132 <span class="d abs">d</span> 133 </div> 134 135 <div class="grid"> 136 <span class="a"></span> 137 <div><span class="e abs">e</span></div> 138 </div> 139 140 <div class="grid"> 141 <span class="a"></span> 142 <span class="f abs">f</span> 143 </div> 144 145 <div class="grid"> 146 <span class="a"></span> 147 <x><span class="g abs">g</span></x> 148 </div> 149 150 </div><div style="float:left"> 151 152 <div class="grid zero-size"> 153 <span class="b abs">b</span> 154 </div> 155 156 <div class="grid auto-size"> 157 <span class="h abs">h</span> 158 </div> 159 160 <div class="grid" style="height:auto"> 161 <div style="grid-column: 1 / span 3"></div> 162 <div class="i abs">i</div> 163 </div> 164 165 <div class="grid" style="height:auto"> 166 <div style="grid-column: 1 / span 3"></div> 167 <div class="j abs">j</div> 168 </div> 169 170 <div class="grid" style="width:43px; height:53px"> 171 <span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span> 172 <span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span> 173 <span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span> 174 <span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span> 175 </div> 176 177 </div> 178 179 </body> 180 </html>