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

Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.