Search code examples
htmlcsscss-grid

Set element to be 2fr instead of 1fr CSS Grid Column

I'm trying to create a flexible CSS grid to display some cards. I've set my CSS code for the cards to repeat and auto-fill to a minimum of 330px and a max of 1fr. Everything is fine, but now I have a card that I require to be a little bigger, at 2fr. The problem is very simple, but I can find a way to make this one card to be 2fr instead of 1fr.

Cards container

.cards-row{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    grid-column-gap: 15px;
}


<div class="cards-row" style="margin-top: 30px;">
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
     <div class="card-wrap">
     </div>
</div>

This is basically what I want to achieve 1

Solution

  • Make the last element to span 2 columns:

    .cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 15px;
}

.card-wrap {
  height: 100px;
  background: red;
}
.card-wrap:last-child {
  grid-column: span 2;
}
    <div class="cards-row" style="margin-top: 30px;">
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
  <div class="card-wrap">
  </div>
</div>