row-grid-lanes-align-self-003-ref.html (1970B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .grid { 7 display: grid; 8 width: 100px; 9 height: 250px; 10 grid-template-rows: repeat(4, 1fr); 11 gap: 5px; 12 border: 1px solid black; 13 margin-bottom: 20px; 14 } 15 16 .item { 17 background-color: #444; 18 color: #fff; 19 padding: 2px; 20 width: 50px; 21 } 22 23 .img-placeholder { 24 width: 48px; 25 height: 30px; 26 background: linear-gradient(45deg, #666, #999); 27 display: inline-block; 28 } 29 30 input[type="text"] { 31 background-color: #f0f0f0; 32 border: 1px solid #999; 33 padding: 2px; 34 height: 20px; 35 width: auto; 36 } 37 38 button { 39 background-color: #ddd; 40 border: 1px solid #999; 41 padding: 2px 4px; 42 cursor: pointer; 43 width: auto; 44 } 45 46 .start { 47 align-self: start; 48 background-color: red; 49 grid-row: 1/2; 50 } 51 52 .center { 53 align-self: center; 54 background-color: green; 55 grid-row: 2/3; 56 } 57 58 .end { 59 align-self: end; 60 background-color: blue; 61 grid-row: 3/4; 62 } 63 64 .stretch { 65 align-self: stretch; 66 background-color: orange; 67 grid-row: 4/5; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="grid"> 73 <div class="item start"> 74 <div class="img-placeholder"></div> 75 </div> 76 <div class="item center"> 77 <div class="img-placeholder"></div> 78 </div> 79 <div class="item end"> 80 <div class="img-placeholder"></div> 81 </div> 82 <div class="item stretch"> 83 <div class="img-placeholder" style="height: 100%;"></div> 84 </div> 85 </div> 86 87 <div class="grid"> 88 <div class="item start"> 89 <input type="text" value="start" style="width: 43px;"> 90 </div> 91 <div class="item center"> 92 <button>center</button> 93 </div> 94 <div class="item end"> 95 <input type="text" value="end" style="width: 43px;"> 96 </div> 97 <div class="item stretch"> 98 <button style="height: 100%;">stretch</button> 99 </div> 100 </div> 101 </body> 102 </html>