different size boxes using display grid
hello I´m using display: grid to render a list of boxes
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); } .box { margin: 5px; background-color: #eee; } .big { height: 100px; }
<div class="boxes"> <div class="box big">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> <div class="box">box</div> </div>
as you can see the .big class is affecting all the boxes in the same row. is it possible to leave them with the original height except the one with the .big class? thank you