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