row-grid-lanes-alignment-ref.html (3155B)
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: 800px; 14 height: 850px; 15 border: 2px solid black; 16 margin: 20px; 17 } 18 19 .grid { 20 display: grid; 21 grid-template-rows: repeat(5, 150px); 22 grid-auto-columns: auto; 23 position: relative; 24 padding: 20px; 25 gap: 15px; 26 border: 1px dashed #999; 27 width: 700px; 28 } 29 30 .item { 31 background: lightblue; 32 padding: 10px; 33 border: 1px solid blue; 34 width: 80px; 35 } 36 37 .abspos { 38 position: absolute; 39 width: 40px; 40 height: 60px; 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-row: 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-row: 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-row: 3 / 4; 89 grid-column: 1 / 2; 90 align-self: center; 91 justify-self: center; 92 background: hotpink; 93 } 94 95 .safe-align { 96 position: absolute; 97 background: orange; 98 border: 1px solid darkorange; 99 grid-row: 1 / 2; 100 height: 170px; 101 width: 30px; 102 align-self: safe end; 103 justify-self: center; 104 font-size: 10px; 105 } 106 107 .unsafe-align { 108 position: absolute; 109 background: purple; 110 border: 1px solid darkmagenta; 111 grid-row: 5 / 6; 112 height: 170px; 113 width: 30px; 114 align-self: unsafe end; 115 justify-self: center; 116 font-size: 10px; 117 } 118 </style> 119 </head> 120 <body> 121 <div class="container"> 122 <div class="grid"> 123 <div class="item">Item 1</div> 124 <div class="item">Item 2</div> 125 <div class="item">Item 3</div> 126 <div class="abspos align-self align-start">align-self: start</div> 127 <div class="abspos align-self align-end">align-self: end</div> 128 <div class="abspos align-self align-center">align-self: center</div> 129 <div class="item">Item 4</div> 130 <div class="item">Item 5</div> 131 <div class="abspos justify-self justify-start">justify-self: start</div> 132 <div class="abspos justify-self justify-end">justify-self: end</div> 133 <div class="abspos justify-self justify-center">justify-self: center</div> 134 <div class="abspos combo-center-center">center + center</div> 135 <div class="safe-align">align-self: safe end</div> 136 <div class="unsafe-align">align-self: unsafe end</div> 137 </div> 138 </div> 139 </body> 140 </html>