positioned-grid-items-negative-indices-002-ref.html (1131B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolutely positioned items reference file</title> 4 <style> 5 #grid { 6 display: grid; 7 grid: 50px 50px / 50px 50px; 8 margin: 1px 2px 3px 4px; 9 padding: 100px 100px 100px 100px; 10 border-width: 9px 3px 12px 6px; 11 border-style: solid; 12 width: 100px; 13 height: 100px; 14 position: relative; 15 background-color: gray; 16 } 17 18 #grid > div { 19 position: absolute; 20 width: 100%; 21 height: 100%; 22 } 23 24 #firstItem { 25 background: magenta; 26 grid-column: auto / 1; 27 grid-row: auto / 1; 28 } 29 30 #secondItem { 31 background: cyan; 32 grid-column: 3 / auto; 33 grid-row: 3 / auto; 34 } 35 36 #thirdItem { 37 background: yellow; 38 grid-column: 5 / 6; 39 grid-row: 5 / 6; 40 width: 25% !important; 41 height: 25% !important; 42 } 43 44 #fourthItem { 45 background: lime; 46 grid-column: 2 / 3; 47 grid-row: 2 / 3; 48 } 49 </style> 50 51 <p>The test passes if it has the same output than the reference.</p> 52 <div id="grid"> 53 <div id="firstItem"></div> 54 <div id="secondItem"></div> 55 <div id="thirdItem"></div> 56 <div id="fourthItem"></div> 57 </div>