grid-item-rel-pos-002-ref.html (687B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>Reference: Rel.pos. centered grid item with style change.</title> 4 <link rel="author" title="James0x57" href="mailto:James0x57@gmail.com"> 5 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 6 <style> 7 .grid { 8 margin: 40px; 9 display: grid; 10 grid: auto / repeat(3,100px); 11 grid-gap: 20px; 12 } 13 span, even { 14 position: relative; 15 min-height: 20px; 16 background: grey; 17 left: 0px; 18 width: 30px; 19 justify-self: center; 20 } 21 .offset even { 22 left: 20%; 23 } 24 25 </style> 26 27 <div class="grid offset"> 28 <span></span><span></span><span></span> 29 <even></even><even></even><even></even> 30 <span></span><span></span><span></span> 31 </div>