column-grid-lanes-justify-self-001-ref.html (3062B)
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 gap: 2px; 13 grid-template-columns: repeat(3, 70px); 14 grid-template-rows: repeat(4, min-content); 15 color: #444; 16 border: 1px solid; 17 padding: 2px; 18 height: 180px; 19 margin: 5px; 20 } 21 22 item { 23 background-color: #444; 24 color: #fff; 25 padding: 2px; 26 height: 30px; 27 } 28 29 .start { 30 justify-self: start; 31 background-color: red; 32 } 33 34 .end { 35 justify-self: end; 36 background-color: blue; 37 } 38 39 .center { 40 justify-self: center; 41 background-color: green; 42 } 43 44 .stretch { 45 justify-self: stretch; 46 background-color: orange; 47 } 48 49 .auto { 50 justify-self: auto; 51 background-color: gray; 52 } 53 54 .narrow { 55 width: 20px; 56 } 57 58 .medium { 59 width: 30px; 60 } 61 62 .wide { 63 width: 45px; 64 } 65 </style> 66 </head> 67 <body> 68 <div class="grid"> 69 <item class="start narrow">S1</item> 70 <item class="start medium">S2</item> 71 <item class="start wide">S3</item> 72 <item class="center narrow">C1</item> 73 <item class="center medium">C2</item> 74 <item class="center wide">C3</item> 75 <item class="end narrow">E1</item> 76 <item class="end medium">E2</item> 77 <item class="end wide">E3</item> 78 <item class="stretch">ST1</item> 79 <item class="stretch">ST2</item> 80 <item class="stretch">ST3</item> 81 </div> 82 83 <div class="grid" style="justify-items: start;"> 84 <item class="auto narrow">A1</item> 85 <item class="auto medium">A2</item> 86 <item class="auto wide">A3</item> 87 <item class="center narrow">C1</item> 88 <item class="center medium">C2</item> 89 <item class="center wide">C3</item> 90 <item class="end narrow">E1</item> 91 <item class="end medium">E2</item> 92 <item class="end wide">E3</item> 93 <item class="stretch">ST1</item> 94 <item class="stretch">ST2</item> 95 <item class="stretch">ST3</item> 96 </div> 97 98 <div class="grid" style="justify-items: center;"> 99 <item class="auto narrow">A1</item> 100 <item class="auto medium">A2</item> 101 <item class="auto wide">A3</item> 102 <item class="start narrow">S1</item> 103 <item class="start medium">S2</item> 104 <item class="start wide">S3</item> 105 <item class="end narrow">E1</item> 106 <item class="end medium">E2</item> 107 <item class="end wide">E3</item> 108 <item class="stretch">ST1</item> 109 <item class="stretch">ST2</item> 110 <item class="stretch">ST3</item> 111 </div> 112 113 <div class="grid" style="justify-items: end;"> 114 <item class="auto narrow">A1</item> 115 <item class="auto medium">A2</item> 116 <item class="auto wide">A3</item> 117 <item class="start narrow">S1</item> 118 <item class="start medium">S2</item> 119 <item class="start wide">S3</item> 120 <item class="center narrow">C1</item> 121 <item class="center medium">C2</item> 122 <item class="center wide">C3</item> 123 <item class="stretch">ST1</item> 124 <item class="stretch">ST2</item> 125 <item class="stretch">ST3</item> 126 </div> 127 </body> 128 </html>