grid-item-rel-pos-001-ref.html (640B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>Reference: Rel.pos. 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 } 19 .offset even { 20 left: 50%; 21 } 22 23 </style> 24 25 26 <div class="grid offset"> 27 <span></span><span></span><span></span> 28 <even></even><even></even><even></even> 29 <span></span><span></span><span></span> 30 </div>