column-grid-lanes-alignment-ref.html (3344B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 html,body { 7 color:black; 8 background-color:white; 9 font:15px/1 monospace; 10 } 11 12 .container { 13 width: 850px; 14 height: 800px; 15 border: 2px solid black; 16 margin: 20px; 17 } 18 19 .grid { 20 display: grid; 21 grid-template-columns: repeat(5, 150px); 22 grid-auto-rows: auto; 23 position: relative; 24 padding: 20px; 25 gap: 15px; 26 border: 1px dashed #999; 27 height: 700px; 28 } 29 30 .item { 31 background: lightblue; 32 padding: 10px; 33 border: 1px solid blue; 34 height: 80px; 35 } 36 37 .abspos { 38 position: absolute; 39 width: 60px; 40 height: 40px; 41 border: 2px solid black; 42 font-size: 10px; 43 display: flex; 44 align-items: center; 45 justify-content: center; 46 text-align: center; 47 } 48 49 .align-self { 50 grid-column: 2 / 3; 51 } 52 53 .align-start { 54 align-self: start; 55 background: lightcoral; 56 } 57 58 .align-end { 59 align-self: end; 60 background: lightgreen; 61 } 62 63 .align-center { 64 align-self: center; 65 background: lightblue; 66 } 67 68 .justify-self { 69 grid-column: 4 / 5; 70 } 71 72 .justify-start { 73 justify-self: start; 74 background: gold; 75 } 76 77 .justify-end { 78 justify-self: end; 79 background: silver; 80 } 81 82 .justify-center { 83 justify-self: center; 84 background: tan; 85 } 86 87 .combo-center-center { 88 grid-column: 3 / 4; 89 align-self: center; 90 justify-self: center; 91 background: hotpink; 92 } 93 94 .safe-align { 95 position: absolute; 96 background: orange; 97 border: 1px solid darkorange; 98 grid-column: 1 / 2; 99 width: 170px; 100 height: 30px; 101 justify-self: safe end; 102 align-self: center; 103 font-size: 10px; 104 } 105 106 .unsafe-align { 107 position: absolute; 108 background: purple; 109 border: 1px solid darkmagenta; 110 grid-column: 5 / 6; 111 width: 170px; 112 height: 30px; 113 justify-self: unsafe end; 114 align-self: center; 115 font-size: 10px; 116 } 117 </style> 118 </head> 119 <body> 120 <div class="container"> 121 <div class="grid"> 122 <div class="item">Item 1</div> 123 <div class="item">Item 2</div> 124 <div class="item">Item 3</div> 125 <div class="abspos align-self align-start">align-self: start</div> 126 <div class="abspos align-self align-end">align-self: end</div> 127 <div class="abspos align-self align-center">align-self: center</div> 128 <div class="item">Item 4</div> 129 <div class="item">Item 5</div> 130 <div class="abspos justify-self justify-start">justify-self: start</div> 131 <div class="abspos justify-self justify-end">justify-self: end</div> 132 <div class="abspos justify-self justify-center">justify-self: center</div> 133 <div class="abspos combo-center-center">center + center</div> 134 <div class="safe-align">justify-self: safe end</div> 135 <div class="unsafe-align">justify-self: unsafe end</div> 136 </div> 137 </div> 138 </body> 139 </html>