row-grid-lanes-alignment-positioned-items-002-ref.html (1988B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 html,body { 7 color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; 8 } 9 10 .grid { 11 position: relative; 12 display: grid; 13 grid-template-columns: 150px; 14 grid-template-rows: 80px 80px 80px; 15 width: 150px; 16 height: 290px; 17 gap: 10px; 18 padding: 10px; 19 border: 2px solid black; 20 margin: 10px; 21 } 22 23 .grid > div { 24 position: absolute; 25 border: 1px solid #333; 26 width: 30px; 27 height: 120px; 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 } 32 33 .safe-start { 34 grid-row: 1 / 2; 35 justify-self: safe start; 36 background: lightcoral; 37 } 38 39 .unsafe-start { 40 grid-row: 2 / 3; 41 justify-self: unsafe start; 42 background: lightblue; 43 } 44 45 .safe-end { 46 grid-row: 3 / 4; 47 justify-self: safe end; 48 background: lightgreen; 49 } 50 51 .unsafe-end { 52 grid-row: 1 / 2; 53 justify-self: unsafe end; 54 background: lightyellow; 55 } 56 57 .safe-center { 58 grid-row: 2 / 3; 59 justify-self: safe center; 60 background: plum; 61 } 62 63 .unsafe-center { 64 grid-row: 3 / 4; 65 justify-self: unsafe center; 66 background: orange; 67 } 68 </style> 69 </head> 70 <body> 71 <div class="grid"> 72 <div class="safe-start">safe-start</div> 73 <div class="unsafe-start">unsafe-start</div> 74 <div class="safe-end">safe-end</div> 75 <div class="unsafe-end">unsafe-end</div> 76 <div class="safe-center">safe-center</div> 77 <div class="unsafe-center">unsafe-center</div> 78 </div> 79 80 <div class="grid" style="direction: rtl;"> 81 <div class="safe-start">safe-start</div> 82 <div class="unsafe-start">unsafe-start</div> 83 <div class="safe-end">safe-end</div> 84 <div class="unsafe-end">unsafe-end</div> 85 <div class="safe-center">safe-center</div> 86 <div class="unsafe-center">unsafe-center</div> 87 </div> 88 </body> 89 </html>