title: Why column width is broken?
body: <p>I have table with grid layout. But when width is reduced not all columns have same width. Here <code>Кількість</code> is spanned over two 2fr columns. So I expect it has same width as two column: <code>1</code> and <code>грн</code>. The <a href="https://codepen.io/KES777/pen/gdGpWe" rel="nofollow noreferrer">source code</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* The layout for invoice items */
  .items-grid {
    width: 680px;
   display: grid;
   grid-template-columns: 2fr 4fr 60% 2fr 2fr 3fr 3fr;
   grid-template-rows: auto;
   border: 3px solid black;
  }
  
  /* All cells should be aligned vertically by center */
  .items-grid &gt; dt {
   display: grid;
   align-items: center;
  }
  
  /* Do not display right/bottom border for last column/row */
  .items-grid &gt; dt:not(:nth-child(7n)) {
   border-right: 2px solid black;
  }
  .items-grid &gt; dt:not(:nth-last-child(-n+7)) {
   border-bottom: 2px solid black;
  }
  
  
  /* N, Code */
  .items-grid &gt; dt:nth-child(7n +1),
  .items-grid &gt; dt:nth-child(7n +2)
  {
   justify-items: center;
  }
  
  /* Qty, Price, Suma */
  .items-grid &gt; dt:nth-child(7n +4),
  .items-grid &gt; dt:nth-child(7n +6),
  .items-grid &gt; dt:nth-child(7n +7)
  {
   justify-items: end;
  }
  
  
  /** STYLING FIRST LINE **/
  .items-grid &gt; dt:nth-child(-n+7) {
   font-weight: bold;
   justify-items: center;
   text-align: center;
  }
  
  /* 'Quantity' column is splitted by two later */
  .items-grid &gt; dt:nth-child(4) {
   grid-column-start: span 2;
  }
  
  /* added for parity cell should be hidded */
  .items-grid &gt; dt:nth-child(5) {
   display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;dl class="items-grid"&gt;
    &lt;dt&gt;№
    &lt;dt&gt;Код
    &lt;dt&gt;Товари (роботи, послуги)
    &lt;dt&gt;Кіль&lt;wbr&gt;кість
    &lt;dt&gt;
    &lt;dt&gt;Ціна з ПДВ
    &lt;dt&gt;Сума з ПДВ
    &lt;dt&gt;1
    &lt;dt&gt;MED000754
    &lt;dt&gt;Надання в строкове платне користування Віртуальної інфраструктури (TuchaBit)
    &lt;dt&gt;1
    &lt;dt&gt;грн
    &lt;dt&gt;630,62
    &lt;dt&gt;630,62
    &lt;dt&gt;2
    &lt;dt&gt;MED000754
    &lt;dt&gt;Надання в строкове платне користування Віртуальної інфраструктури (TuchaBit)
    &lt;dt&gt;1
    &lt;dt&gt;грн
    &lt;dt&gt;630,62
    &lt;dt&gt;630,62
  &lt;/dl&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/nWLrw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nWLrw.jpg" alt="enter image description here"></a></p>
  
  <p><strong>UPD</strong><br>
  This is broken only in FF</p>