row-grid-lanes-align-self-002-ref.html (2047B)
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-rows: repeat(3, 40px); 14 grid-template-columns: repeat(2, min-content); 15 color: #444; 16 border: 1px solid; 17 padding: 2px; 18 width: 180px; 19 margin: 5px; 20 } 21 22 item { 23 background-color: #444; 24 color: #fff; 25 padding: 2px; 26 width: 45px; 27 } 28 29 .safe-end { 30 align-self: safe end; 31 background-color: purple; 32 height: 50px; 33 } 34 35 .safe-center { 36 align-self: safe center; 37 background-color: teal; 38 height: 45px; 39 } 40 41 .unsafe-end { 42 align-self: end; 43 background-color: darkmagenta; 44 height: 50px; 45 } 46 47 .unsafe-center { 48 align-self: center; 49 background-color: darkcyan; 50 height: 45px; 51 } 52 53 .normal { 54 align-self: normal; 55 background-color: brown; 56 } 57 58 .self-start { 59 align-self: self-start; 60 background-color: darkred; 61 } 62 63 .self-end { 64 align-self: self-end; 65 background-color: darkblue; 66 } 67 68 .short { 69 height: 15px; 70 } 71 </style> 72 </head> 73 <body> 74 <div class="grid"> 75 <item class="normal">N1</item> 76 <item class="normal">N3</item> 77 <item class="safe-end">SE1</item> 78 <item class="unsafe-end">UE1</item> 79 <item class="normal">N2</item> 80 <item class="normal">N4</item> 81 </div> 82 83 <div class="grid"> 84 <item class="normal">N1</item> 85 <item class="normal">N3</item> 86 <item class="safe-center">SC1</item> 87 <item class="unsafe-center">UC1</item> 88 <item class="normal">N2</item> 89 <item class="normal">N4</item> 90 </div> 91 92 <div class="grid"> 93 <item class="self-start short">SS1</item> 94 <item class="self-end short">SE4</item> 95 <item class="self-end short">SE2</item> 96 <item class="self-start short">SS5</item> 97 <item class="self-start short">SS3</item> 98 <item class="self-end short">SE6</item> 99 </div> 100 </body> 101 </html>