title: Specifying content of which cells expand cell areas and which do not in CSS Grid
body: <p>I want to have a cell in a grid with unimportant information which doesn't make any other cells expand beyond what's absolutely required. Its height should be no more than the height of other cells and its width should be that of empty unoccupied area.</p>
  
  <p>Let's say for each item I have a thumbnail, a title (single unwrappable line), info (zero or more lines), description (possibly very long, displayed only if there's empty space).</p>
  
  <p>I have come up with this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list {
    display: flex;
    flex-wrap: wrap;
    font: 12px/14px Verdana;
  }
  .item {
    display: grid;
    grid-template-areas:
      "thumb thumb thumb thumb"
      "sl    title desc  sr   "
      "sl    info  desc  sr   ";
    grid-template-columns:
      auto auto 1fr auto;
    grid-template-rows:
      auto auto 1fr;
    min-width: calc(var(--min-item-size) + 4px);
    max-width: calc(var(--max-item-size) + 4px);
    border: dotted 2px darkblue;
    margin: 4px 2px auto 2px;
  }
  .item &gt; * {
    min-width: 0;
    min-height: 0;
    border: dotted 1px dodgerblue;
    margin: 1px;
  }
  .thumb {
    grid-area: thumb;
    margin: auto;
    height: 100px;
    background: linear-gradient(lightskyblue, deepskyblue);
  }
  .title {
    grid-area: title;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .info {
    grid-area: info;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desc {
    grid-area: desc;
    position: relative;
    overflow: hidden;
  }
  .desc-text::after {
    position: absolute; /*clean hack*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: var(--lorem-ipsum);
  }
  .desc-text.short::after {
    content: var(--lorem-ipsum-short);
  }
  :root {
    --lorem-ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    --lorem-ipsum-short: "Lorem";
    --min-item-size: 100px;
    --max-item-size: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list"&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;1&lt;/div&gt;
      &lt;div class="title"&gt;Short title&lt;/div&gt;
      &lt;div class="info"&gt;Short info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;2&lt;/div&gt;
      &lt;div class="title"&gt;Very long and detailed title&lt;/div&gt;
      &lt;div class="info"&gt;Very long and detailed info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 50px"&gt;3&lt;/div&gt;
      &lt;div class="title"&gt;Short title&lt;/div&gt;
      &lt;div class="info"&gt;Short info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 50px"&gt;4&lt;/div&gt;
      &lt;div class="title"&gt;Very long and detailed title&lt;/div&gt;
      &lt;div class="info"&gt;Very long and detailed info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item" style="grid-template-columns: 22px auto 1fr 22px /*dirty hack*/"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;5&lt;/div&gt;
      &lt;div class="title"&gt;Short title&lt;/div&gt;
      &lt;div class="info"&gt;Short info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text short"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;6&lt;/div&gt;
      &lt;div class="title"&gt;Very long and detailed title&lt;/div&gt;
      &lt;div class="info"&gt;Very long and detailed info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text short"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I had to put description into an absolutely positioned container inside relatively positioned cell. This makes the grid ignore contents and kinda works, but there're several issues:</p>
  
  <ol>
  <li><p>If description is short (see item #5), I can't center the information block, as <code>1fr</code> is used for description, so setting spacing columns (<code>sl</code> and <code>sr</code>) to anything other than <code>0</code> doesn't work (dirty hack in the form of style attribute doesn't count, it's just to display the use of spacing cells).</p></li>
  <li><p>It doesn't look like a pure CSS Grid solution. I'd like to know whether there're more "native" ways of specifying how cell growing is affected by content.</p></li>
  </ol>
  
  <hr>
  
  <p>If you want a "clean start", you can remove the <code>position: absolute; /*clean hack*/</code> line from CSS and the <code>style="grid-template-columns: 22px auto 1fr 22px /*dirty hack*/"</code> attribute from HTML. Some positioning CSS properties become obsolete, but they stop affecting positioning. They can be removed too if you want.</p>
  
  <p>Clean start:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list {
    display: flex;
    flex-wrap: wrap;
    font: 12px/14px Verdana;
  }
  .item {
    display: grid;
    grid-template-areas:
      "thumb thumb thumb thumb"
      "sl    title desc  sr   "
      "sl    info  desc  sr   ";
    grid-template-columns:
      auto auto 1fr auto;
    grid-template-rows:
      auto auto 1fr;
    min-width: calc(var(--min-item-size) + 4px);
    max-width: calc(var(--max-item-size) + 4px);
    border: dotted 2px darkblue;
    margin: 4px 2px auto 2px;
  }
  .item &gt; * {
    min-width: 0;
    min-height: 0;
    border: dotted 1px dodgerblue;
    margin: 1px;
  }
  .thumb {
    grid-area: thumb;
    margin: auto;
    height: 100px;
    background: linear-gradient(lightskyblue, deepskyblue);
  }
  .title {
    grid-area: title;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .info {
    grid-area: info;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desc {
    grid-area: desc;
    overflow: hidden;
  }
  .desc-text::after {
    content: var(--lorem-ipsum);
  }
  .desc-text.short::after {
    content: var(--lorem-ipsum-short);
  }
  :root {
    --lorem-ipsum: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    --lorem-ipsum-short: "Lorem";
    --min-item-size: 100px;
    --max-item-size: 150px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list"&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;1&lt;/div&gt;
      &lt;div class="title"&gt;Short title&lt;/div&gt;
      &lt;div class="info"&gt;Short info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;2&lt;/div&gt;
      &lt;div class="title"&gt;Very long and detailed title&lt;/div&gt;
      &lt;div class="info"&gt;Very long and detailed info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 50px"&gt;3&lt;/div&gt;
      &lt;div class="title"&gt;Short title&lt;/div&gt;
      &lt;div class="info"&gt;Short info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 50px"&gt;4&lt;/div&gt;
      &lt;div class="title"&gt;Very long and detailed title&lt;/div&gt;
      &lt;div class="info"&gt;Very long and detailed info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;5&lt;/div&gt;
      &lt;div class="title"&gt;Short title&lt;/div&gt;
      &lt;div class="info"&gt;Short info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text short"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumb" style="width: 150px"&gt;6&lt;/div&gt;
      &lt;div class="title"&gt;Very long and detailed title&lt;/div&gt;
      &lt;div class="info"&gt;Very long and detailed info&lt;/div&gt;
      &lt;div class="desc"&gt;
        &lt;div class="desc-text short"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>