title: Set element to be 2fr instead of 1fr CSS Grid Column
body: <p>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.</p>
  
  <p><strong>Cards container</strong></p>
  
  <pre><code>.cards-row{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
      grid-column-gap: 15px;
  }
  </code></pre>
  
  <pre><code>
  &lt;div class="cards-row" style="margin-top: 30px;"&gt;
       &lt;div class="card-wrap"&gt;
       &lt;/div&gt;
       &lt;div class="card-wrap"&gt;
       &lt;/div&gt;
       &lt;div class="card-wrap"&gt;
       &lt;/div&gt;
       &lt;div class="card-wrap"&gt;
       &lt;/div&gt;
       &lt;div class="card-wrap"&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is basically what I want to achieve
  <img src="https://i.imgur.com/vK5Kkih.jpg" alt="1"></p>