grid-abspos-items-013.html (2930B)
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: 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 <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos"> 11 <link rel="match" href="grid-abspos-items-013-ref.html"> 12 <style type="text/css"> 13 body { width:800px; } 14 15 .grid { 16 display: grid; 17 position: relative; 18 grid-template-columns: repeat(5, 20px); 19 grid-auto-rows: 10px; 20 grid-gap: 10px 100px; 21 border: 1px solid; 22 padding: 0 3px 0 5px; 23 height: 40px; 24 margin-bottom: 2px; 25 } 26 .grid.r { 27 grid-template-columns: 20px; 28 grid-template-rows: repeat(5, 20px); 29 height: 160px; 30 padding: 2px 3px 4px 5px; 31 float: left; 32 min-width: 70px; 33 margin-right: 2px; 34 } 35 .c.s { 36 justify-content: space-evenly; 37 grid-gap: 0; 38 } 39 40 x { 41 background: lime; 42 } 43 44 a { 45 position: absolute; 46 left:0; right:0; bottom:20px; height: 3px; 47 background: black; 48 } 49 b { 50 position: absolute; 51 left:0; right:0; bottom:10px; height: 3px; 52 background: grey; 53 } 54 c { 55 position: absolute; 56 left:0; right:0; bottom:0; height: 3px; 57 background: blue; 58 } 59 60 .r a { 61 left:50px; top:0; bottom:0; width: 3px; height:auto; 62 } 63 .r b { 64 left:40px; top:0; bottom:0; width: 3px; height:auto; 65 } 66 .r c { 67 left:30px; top:0; bottom:0; width: 3px; height:auto; 68 } 69 70 </style> 71 </head> 72 <body> 73 74 <div class="grid c"> 75 <x></x><x></x><x></x><x></x> 76 <a style="grid-column:2/4"></a><b style="grid-column:auto/4"></b><c style="grid-column:4/auto"></c> 77 </div> 78 79 <div class="grid c"> 80 <x></x><x></x><x></x><x></x> 81 <a style="grid-column:1/4"></a><b style="grid-column:auto/1"></b><c style="grid-column:1/auto"></c> 82 </div> 83 84 <div class="grid c"> 85 <x></x><x></x><x></x><x></x> 86 <a style="grid-column:6/6"></a><b style="grid-column:auto/6"></b><c style="grid-column:6/auto"></c> 87 </div> 88 89 <div class="grid c s"> 90 <x></x><x></x><x></x><x></x> 91 <a style="grid-column:2/4"></a><b style="grid-column:auto/4"></b><c style="grid-column:4/auto"></c> 92 </div> 93 94 <div class="grid c s"> 95 <x></x><x></x><x></x><x></x> 96 <a style="grid-column:1/4"></a><b style="grid-column:auto/1"></b><c style="grid-column:1/auto"></c> 97 </div> 98 99 <div class="grid c s"> 100 <x></x><x></x><x></x><x></x> 101 <a style="grid-column:6/6"></a><b style="grid-column:auto/6"></b><c style="grid-column:6/auto"></c> 102 </div> 103 104 <div class="grid r"> 105 <x></x><x></x><x></x><x></x> 106 <a style="grid-row:2/4"></a><b style="grid-row:auto/4"></b><c style="grid-row:4/auto"></c> 107 </div> 108 109 <div class="grid r"> 110 <x></x><x></x><x></x><x></x> 111 <a style="grid-row:1/4"></a><b style="grid-row:auto/1"></b><c style="grid-row:1/auto"></c> 112 </div> 113 114 <div class="grid r"> 115 <x></x><x></x><x></x><x></x> 116 <a style="grid-row:6/6"></a><b style="grid-row:auto/6"></b><c style="grid-row:6/auto"></c> 117 </div> 118 119 </body> 120 </html>