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