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