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