row-grid-lanes-alignment-positioned-items-003.html (2539B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Mixed alignment values for positioned items</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/#abspos"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment"> 9 <link rel="match" href="row-grid-lanes-alignment-positioned-items-003-ref.html"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid-lanes { 16 position: relative; 17 display: grid-lanes; 18 grid-lanes-direction: row; 19 grid-template-rows: 90px 90px 90px; 20 width: 150px; 21 height: 320px; 22 gap: 10px; 23 padding: 15px; 24 border: 2px solid black; 25 margin: 10px; 26 } 27 28 .grid-lanes > div { 29 position: absolute; 30 border: 1px solid #333; 31 width: 30px; 32 height: 70px; 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 } 37 38 .flex-start-item { 39 grid-row: 1 / 2; 40 justify-self: flex-start; 41 align-self: flex-start; 42 background: lightcoral; 43 } 44 45 .flex-end-item { 46 grid-row: 2 / 3; 47 justify-self: flex-end; 48 align-self: flex-end; 49 background: lightblue; 50 } 51 52 .mixed-legacy { 53 grid-row: 3 / 4; 54 justify-self: flex-start; 55 align-self: end; 56 background: lightgreen; 57 } 58 59 .normal-item { 60 grid-row: 1 / 2; 61 justify-self: normal; 62 align-self: normal; 63 background: lightyellow; 64 } 65 66 .auto-item { 67 grid-row: 2 / 3; 68 justify-self: auto; 69 align-self: auto; 70 background: plum; 71 } 72 73 .legacy-center { 74 grid-row: 3 / 4; 75 justify-self: flex-start; 76 align-self: center; 77 background: orange; 78 } 79 </style> 80 </head> 81 <body> 82 <div class="grid-lanes"> 83 <div class="flex-start-item">flex-start</div> 84 <div class="flex-end-item">flex-end</div> 85 <div class="mixed-legacy">mixed</div> 86 <div class="normal-item">normal</div> 87 <div class="auto-item">auto</div> 88 <div class="legacy-center">legacy-center</div> 89 </div> 90 91 <div class="grid-lanes" style="direction: rtl;"> 92 <div class="flex-start-item">flex-start</div> 93 <div class="flex-end-item">flex-end</div> 94 <div class="mixed-legacy">mixed</div> 95 <div class="normal-item">normal</div> 96 <div class="auto-item">auto</div> 97 <div class="legacy-center">legacy-center</div> 98 </div> 99 </body> 100 </html>