title: How to use a CSS grid with percentages and an unknown amount of columns?
body: <p>This is the layout I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/sOC8P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sOC8P.png" alt="Enter image description here"></a></p>
  
  <p>I'm currently doing it by:</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="ft-Footer_Columns"&gt;
    &lt;div class="ft-Footer_Column ft-Footer_Column-about"&gt;
      &lt;h4 class="ft-Footer_Title"&gt;Title 1&lt;/h4&gt;
  
      &lt;p class="ft-Footer_Text"&gt;Text 1&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="ft-Footer_Column ft-Footer_Column-links"&gt;
      &lt;h4 class="ft-Footer_Title"&gt;Title 2&lt;/h4&gt;
  
      &lt;p class="ft-Footer_Text"&gt;Text 2&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="ft-Footer_Column ft-Footer_Column-contact"&gt;
      &lt;h4 class="ft-Footer_Title"&gt;Title 3&lt;/h4&gt;
  
      &lt;p class="ft-Footer_Text"&gt;Text 3&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>.ft-Footer_Columns {    
    display: grid;
    grid-column-gap: calc(20px * 2);
    grid-template-columns: calc(5 / 12)fr calc(4 / 12)fr calc(3 / 12)fr;
  }
  </code></pre>
  
  <p>This seems like quite a hacky way to achieve what I want.</p>
  
  <p>Ideally I want to be able to do:</p>
  
  <pre><code>.ft-Footer_Columns {    
    display: grid;
    grid-column-gap: calc(20px * 2);
    grid-template-columns: calc(5 / 12 * 100%) calc(4 / 12 * 100%) calc(3 / 12 * 100%);
  }
  </code></pre>
  
  <p>But this currently does <code>100% + ((20px * 2) * 2)</code>.</p>
  
  <p>How would I achieve this percentage / fractal based layout without the hacky <code>calc()FR</code> way?</p>