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