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