grid-position-area-basic-ref.html (639B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <style> 4 #grid { 5 display: grid; 6 grid: 150px 100px / 200px 300px; 7 padding: 20px; 8 position: relative; 9 border: 1px solid; 10 } 11 12 #positioned { 13 position: absolute; 14 background: magenta; 15 grid-column: 1 / 2; 16 grid-row: 1 / 2; 17 left: 500px; 18 bottom: 0; 19 } 20 21 #static { 22 background: pink; 23 grid-column: 1 / 2; 24 grid-row: 1 / 2; 25 } 26 27 #anchor { 28 background: lime; 29 grid-column: 2 / 3; 30 grid-row: 2 / 3; 31 } 32 33 .abs-cb { 34 width: 600px; 35 height: 600px; 36 position: relative; 37 } 38 </style> 39 40 <div id="grid"> 41 <div id="anchor"></div> 42 <div id="positioned">Anchored</div> 43 <div id="static"></div> 44 </div>