row-grid-lanes-align-self-002.html (2424B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Grid Lanes layout with `align-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="row-grid-lanes-align-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-rows: repeat(3, 40px); 18 grid-lanes-direction: row; 19 color: #444; 20 border: 1px solid; 21 padding: 2px; 22 width: 180px; 23 margin: 5px; 24 vertical-align: top; 25 } 26 27 item { 28 background-color: #444; 29 color: #fff; 30 padding: 2px; 31 width: 45px; 32 } 33 34 .safe-end { 35 align-self: safe end; 36 background-color: purple; 37 height: 50px; 38 } 39 40 .safe-center { 41 align-self: safe center; 42 background-color: teal; 43 height: 45px; 44 } 45 46 .unsafe-end { 47 align-self: end; 48 background-color: darkmagenta; 49 height: 50px; 50 } 51 52 .unsafe-center { 53 align-self: center; 54 background-color: darkcyan; 55 height: 45px; 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 .normal { 69 align-self: normal; 70 background-color: brown; 71 } 72 73 .short { 74 height: 15px; 75 } 76 </style> 77 </head> 78 <body> 79 <div class="grid-lanes"> 80 <item class="normal">N1</item> 81 <item class="safe-end">SE1</item> 82 <item class="normal">N2</item> 83 <item class="normal">N3</item> 84 <item class="unsafe-end">UE1</item> 85 <item class="normal">N4</item> 86 </div> 87 88 <div class="grid-lanes"> 89 <item class="normal">N1</item> 90 <item class="safe-center">SC1</item> 91 <item class="normal">N2</item> 92 <item class="normal">N3</item> 93 <item class="unsafe-center">UC1</item> 94 <item class="normal">N4</item> 95 </div> 96 97 <div class="grid-lanes"> 98 <item class="self-start short">SS1</item> 99 <item class="self-end short">SE2</item> 100 <item class="self-start short">SS3</item> 101 <item class="self-end short">SE4</item> 102 <item class="self-start short">SS5</item> 103 <item class="self-end short">SE6</item> 104 </div> 105 </body> 106 </html>