row-grid-lanes-align-self-001.html (3348B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Grid Lanes layout with `align-self`</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-001-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: 250px; 23 margin: 5px; 24 } 25 26 item { 27 background-color: #444; 28 color: #fff; 29 padding: 2px; 30 width: 45px; 31 } 32 33 .start { 34 align-self: start; 35 background-color: red; 36 } 37 38 .end { 39 align-self: end; 40 background-color: blue; 41 } 42 43 .center { 44 align-self: center; 45 background-color: green; 46 } 47 48 .stretch { 49 align-self: stretch; 50 background-color: orange; 51 } 52 53 .auto { 54 align-self: auto; 55 background-color: gray; 56 } 57 58 .short { 59 height: 15px; 60 } 61 62 .medium { 63 height: 20px; 64 } 65 66 .tall { 67 height: 30px; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="grid-lanes"> 73 <item class="start short">S1</item> 74 <item class="start medium">S2</item> 75 <item class="start tall">S3</item> 76 <item class="center short">C1</item> 77 <item class="center medium">C2</item> 78 <item class="center tall">C3</item> 79 <item class="end short">E1</item> 80 <item class="end medium">E2</item> 81 <item class="end tall">E3</item> 82 <item class="stretch">ST1</item> 83 <item class="stretch">ST2</item> 84 <item class="stretch">ST3</item> 85 </div> 86 87 <div class="grid-lanes" style="align-items: start;"> 88 <item class="auto short">A1</item> 89 <item class="auto medium">A2</item> 90 <item class="auto tall">A3</item> 91 <item class="center short">C1</item> 92 <item class="center medium">C2</item> 93 <item class="center tall">C3</item> 94 <item class="end short">E1</item> 95 <item class="end medium">E2</item> 96 <item class="end tall">E3</item> 97 <item class="stretch">ST1</item> 98 <item class="stretch">ST2</item> 99 <item class="stretch">ST3</item> 100 </div> 101 102 <div class="grid-lanes" style="align-items: center;"> 103 <item class="auto short">A1</item> 104 <item class="auto medium">A2</item> 105 <item class="auto tall">A3</item> 106 <item class="start short">S1</item> 107 <item class="start medium">S2</item> 108 <item class="start tall">S3</item> 109 <item class="end short">E1</item> 110 <item class="end medium">E2</item> 111 <item class="end tall">E3</item> 112 <item class="stretch">ST1</item> 113 <item class="stretch">ST2</item> 114 <item class="stretch">ST3</item> 115 </div> 116 117 <div class="grid-lanes" style="align-items: end;"> 118 <item class="auto short">A1</item> 119 <item class="auto medium">A2</item> 120 <item class="auto tall">A3</item> 121 <item class="start short">S1</item> 122 <item class="start medium">S2</item> 123 <item class="start tall">S3</item> 124 <item class="center short">C1</item> 125 <item class="center medium">C2</item> 126 <item class="center tall">C3</item> 127 <item class="stretch">ST1</item> 128 <item class="stretch">ST2</item> 129 <item class="stretch">ST3</item> 130 </div> 131 </body> 132 </html>