column-grid-lanes-justify-self-002.html (2419B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Grid Lanes layout with `justify-self` advanced values and safe/unsafe alignment</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="column-grid-lanes-justify-self-002-ref.html"> 9 <style> 10 html,body { 11 color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0; 12 } 13 14 .grid-lanes { 15 display: grid-lanes; 16 gap: 2px; 17 grid-template-columns: repeat(3, 70px); 18 color: #444; 19 border: 1px solid; 20 padding: 2px; 21 height: 150px; 22 margin: 5px; 23 vertical-align: top; 24 } 25 26 item { 27 background-color: #444; 28 color: #fff; 29 padding: 2px; 30 height: 30px; 31 } 32 33 .safe-end { 34 justify-self: safe end; 35 background-color: purple; 36 width: 80px; 37 } 38 39 .safe-center { 40 justify-self: safe center; 41 background-color: teal; 42 width: 75px; 43 } 44 45 .unsafe-end { 46 justify-self: end; 47 background-color: darkmagenta; 48 width: 80px; 49 } 50 51 .unsafe-center { 52 justify-self: center; 53 background-color: darkcyan; 54 width: 75px; 55 } 56 57 .self-start { 58 justify-self: self-start; 59 background-color: darkred; 60 } 61 62 .self-end { 63 justify-self: self-end; 64 background-color: darkblue; 65 } 66 67 .normal { 68 justify-self: normal; 69 background-color: brown; 70 } 71 72 .narrow { 73 width: 20px; 74 } 75 </style> 76 </head> 77 <body> 78 <div class="grid-lanes"> 79 <item class="normal">N1</item> 80 <item class="safe-end">SE1</item> 81 <item class="normal">N2</item> 82 <item class="normal">N3</item> 83 <item class="unsafe-end">UE1</item> 84 <item class="normal">N4</item> 85 </div> 86 87 <div class="grid-lanes"> 88 <item class="normal">N1</item> 89 <item class="safe-center">SC1</item> 90 <item class="normal">N2</item> 91 <item class="normal">N3</item> 92 <item class="unsafe-center">UC1</item> 93 <item class="normal">N4</item> 94 </div> 95 96 <div class="grid-lanes"> 97 <item class="self-start narrow">SS1</item> 98 <item class="self-end narrow">SE2</item> 99 <item class="self-start narrow">SS3</item> 100 <item class="self-end narrow">SE4</item> 101 <item class="self-start narrow">SS5</item> 102 <item class="self-end narrow">SE6</item> 103 </div> 104 </body> 105 </html>