positioned-grid-items-negative-indices-003-ref.html (599B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title> 4 <style> 5 #grid { 6 display: grid; 7 margin: 4px; 8 padding: 10px; 9 width: 500px; 10 height: 130px; 11 position: relative; 12 } 13 14 #firstItem { 15 grid-column: 1 / span 2; 16 background-color: hotpink; 17 } 18 19 #secondItem { 20 grid-column: 3 / span 6; 21 background-color: lightblue; 22 } 23 24 </style> 25 26 <p>The test passes if there are two tracks in hotpink and 6 in light blue.</p> 27 <div id="grid"> 28 <div id="firstItem"></div> 29 <div id="secondItem"></div> 30 </div>