<div class="grid-test"> <div class="item grid-1-1"></div> <div class="item grid-1-2"></div> <div class="item grid-1-3"></div> <div class="item grid-1-4"></div> <div class="item grid-1-5"></div> <div class="item grid-2-1"></div> <div class="item grid-2-2"></div> <div class="item grid-2-3"></div> <div class="item grid-2-4"></div> <div class="item grid-2-5"></div> <div class="item grid-3-1"></div> <div class="item grid-3-2"></div> <div class="item grid-3-3"></div> <div class="item grid-3-4"></div> <div class="item grid-3-5"></div> <div class="item-a"></div> <div class="item-b"></div> </div>
.grid-test { display:grid; grid-template-columns:40px 50px auto 50px 40px; grid-template-rows:25% 100px auto; .item { border:1px dotted; padding:1rem; &[class*=grid-1] { grid-row:1; } &[class*=grid-2] { grid-row:2; } &[class*=grid-3] { grid-row:3; } } } .grid-1-1, .grid-2-1, .grid-3-1 { grid-column:1; } .grid-1-2, .grid-2-2, .grid-3-2 { grid-column:2; } .grid-1-3, .grid-2-3, .grid-3-3 { grid-column:3; } .grid-1-4, .grid-2-4, .grid-3-4 { grid-column:4; } .grid-1-5, .grid-2-5, .grid-3-5 { grid-column:5; } .item-a { background-color:rgba(255,255,0,0.5); grid-column:2 / span 3; grid-row:1 / span 2; } .item-b { background-color:rgba(0,0,255,0.5); grid-column:1 / span 3; grid-row:2 / span 2; }