row-grid-lanes-alignment-positioned-items-004-ref.html (2567B)
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: 200px; 14 grid-template-rows: 80px 80px 80px; 15 width: 200px; 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: 25px; 27 height: 50px; 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 } 32 33 .start-start { 34 grid-row: 1 / 2; 35 justify-self: start; 36 align-self: start; 37 background: red; 38 } 39 40 .start-center { 41 grid-row: 2 / 3; 42 justify-self: start; 43 align-self: center; 44 background: orange; 45 } 46 47 .start-end { 48 grid-row: 3 / 4; 49 justify-self: start; 50 align-self: end; 51 background: yellow; 52 } 53 54 .center-start { 55 grid-row: 1 / 2; 56 justify-self: center; 57 align-self: start; 58 background: green; 59 } 60 61 .center-center { 62 grid-row: 2 / 3; 63 justify-self: center; 64 align-self: center; 65 background: blue; 66 } 67 68 .center-end { 69 grid-row: 3 / 4; 70 justify-self: center; 71 align-self: end; 72 background: indigo; 73 } 74 75 .end-start { 76 grid-row: 1 / 2; 77 justify-self: end; 78 align-self: start; 79 background: violet; 80 } 81 82 .end-center { 83 grid-row: 2 / 3; 84 justify-self: end; 85 align-self: center; 86 background: pink; 87 } 88 89 .end-end { 90 grid-row: 3 / 4; 91 justify-self: end; 92 align-self: end; 93 background: brown; 94 } 95 </style> 96 </head> 97 <body> 98 <div class="grid"> 99 <div class="start-start">SS</div> 100 <div class="start-center">SC</div> 101 <div class="start-end">SE</div> 102 <div class="center-start">CS</div> 103 <div class="center-center">CC</div> 104 <div class="center-end">CE</div> 105 <div class="end-start">ES</div> 106 <div class="end-center">EC</div> 107 <div class="end-end">EE</div> 108 </div> 109 110 <div class="grid" style="direction: rtl;"> 111 <div class="start-start">SS</div> 112 <div class="start-center">SC</div> 113 <div class="start-end">SE</div> 114 <div class="center-start">CS</div> 115 <div class="center-center">CC</div> 116 <div class="center-end">CE</div> 117 <div class="end-start">ES</div> 118 <div class="end-center">EC</div> 119 <div class="end-end">EE</div> 120 </div> 121 </body> 122 </html>