<!DOCTYPE html> <meta charset="utf-8"> <title>CSS Grid Layout Test: Positioned grid items</title> <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> <link rel="match" href="positioned-grid-items-005-ref.html"> <meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto')."> <style> #grid { display: grid; grid: 150px 100px / 200px 300px; margin: 1px 2px 3px 4px; padding: 20px 15px 10px 5px; border-width: 9px 3px 12px 6px; border-style: solid; width: 550px; height: 400px; position: relative; } #grid > div { position: absolute; right: 0; } #firstItem { background: magenta; grid-column: 1 / 2; grid-row: 1 / 2; } #secondItem { background: cyan; grid-column: 2 / 3; grid-row: 1 / 2; } #thirdItem { background: yellow; grid-column: 1 / 2; grid-row: 2 / 3; } #fourthItem { background: lime; grid-column: 2 / 3; grid-row: 2 / 3; } </style> <p>The test passes if it has the same output than the reference.</p> <div id="grid"> <div id="firstItem">First item</div> <div id="secondItem">Second item</div> <div id="thirdItem">Third item</div> <div id="fourthItem">Fourth item</div> </div>