column-justify-items-end-justify-self-start-001-ref.html (1050B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 grid-template-columns: repeat(3, 100px); 7 background: gray; 8 width: 300px; 9 align-items: start; 10 justify-items: end; 11 } 12 .flex { 13 display: flex; 14 align-items: end; 15 flex-direction: column; 16 } 17 .two-span-item { 18 background-color: lightpink; 19 } 20 .fifty-width { 21 width: 50px; 22 background-color: lightblue; 23 } 24 </style> 25 <body> 26 <p>Test that using justify-items moves each grid-lanes item to the end of the grid-axis track it is on</p> 27 <p>and that justify-self overrides justify-items.</p> 28 <div class="grid"> 29 <div class="flex"> 30 <div class="fifty-width"> 31 This is some text 32 </div> 33 <div class="two-span-item"> 34 This is text 35 </div> 36 <div class="two-span-item"> 37 This is text 38 </div> 39 </div> 40 <div class="fifty-width" style="justify-self: start"> 41 Some larger words in this sentence 42 </div> 43 <div class="fifty-width"> 44 The cat cannot be taken from milk 45 </div> 46 </div> 47 </body> 48 </html>