title: Merged auto growing rows
body: <p>At work, I have designed a UI using VueJS, CSS Grid and <code>display: contents</code>, and I'm having a little trouble with rows.
  There are two display modes, the one below with only totals (&quot;Heures pointées&quot;)</p>
  <p><a href="https://i.stack.imgur.com/ggj28.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ggj28.png" alt="The totals mode" /></a></p>
  <p>And this one with details which are &quot;inserted&quot; between &quot;Absences&quot; and &quot;Heures pointées&quot;.</p>
  <p><a href="https://i.stack.imgur.com/eFxOd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eFxOd.png" alt="The details mode" /></a></p>
  <p>My problem is with the totals one. People whose name are quite long do not fit inside the cell and it isn't growing automatically. I am using VueJS to build grid-template-rows according to what should displayed.</p>
  <pre class="lang-css prettyprint-override"><code>grid-template-rows: auto minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(25px, auto) minmax(30px, auto) minmax(0px, 1fr);
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>grid-template-rows: auto minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(3, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(2, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(2, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(2, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(2, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(2, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(2, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) 10px minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) repeat(1, max-content) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) minmax(25px, auto) minmax(20px, auto) minmax(30px, auto) minmax(0px, 1fr);
  </code></pre>
  <p>It's a bit much but it works. To sum up,</p>
  <ul>
  <li>&quot;Absences&quot; is a <code>minmax(25px, auto)</code></li>
  <li>&quot;Heures pointées&quot; is a <code>minmax(30px, auto)</code></li>
  <li>Anything in between is built using a <code>repeat(N, max-content)</code> with a <code>min-height: 25px;</code> applied on my &quot;Imputation&quot; cells so that it automatically grows according to the name plus a <code>minmax(20px, auto)</code> for the &quot;+&quot; row.</li>
  </ul>
  <p>I thought the name cell which is a <code>grid-row: span var(--static-rows)</code> would automatically make the spanned rows grow with its contents but it appears not to do so. I tried applying a <code>height: max-content;</code> to the cell which does make it grow but it overflows...</p>
  <p><a href="https://i.stack.imgur.com/916mB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/916mB.png" alt="The overflow" /></a></p>
  <p>Is there a way for my rows to automatically grow as well as the spanned cell?</p>
  <p>Thanks!</p>