0

With the example below, when the CSS grid is resized, cells placed on a single column are not cropped. Which means that the min width of the column egals the min width of the cell.

This is the behavior I want.

My problem is when a cell is placed on several columns (span> 1). The columns are resized as if they did not contain anything.

.grid{
  display:grid;
  background:yellow;
}

.item{
  background:red;
  font-size:25pt;
  border: solid 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 0 4px;
}
<div class="grid" style="grid-template-columns: repeat(16, 1fr);">
  <div class="item" style="grid-column: auto / span 2;">Why</div>
  <div class="item" style="grid-column: auto / span 1;">all</div>
  <div class="item" style="grid-column: auto / span 2;">the</div>
  <div class="item" style="grid-column: auto / span 1;">cells</div>
  <div class="item" style="grid-column: auto / span 2;">with</div>
  <div class="item" style="grid-column: auto / span 1;">a</div>
  <div class="item" style="grid-column: auto / span 1;">span</div>
  <div class="item" style="grid-column: auto / span 2;">value</div>
  <div class="item" style="grid-column: auto / span 1;">over</div>
  <div class="item" style="grid-column: auto / span 2;">one</div>
  <div class="item" style="grid-column: auto / span 1;">shrinks?</div>
</div>

When running the code snippet, only the cells with span of 2 have its content cropped.

I don't understand why these two différents behaviors, and I'm looking for a workaround.

Note that is important to have display:grid (not flex or something else)

Julien Lalaut
  • 13
  • 3
  • You've told all the columns to be the same width. What effect are you trying to achieve here. – Paulie_D Sep 13 '21 at 13:48
  • I refreshed the example. I hope that is more clear. – Julien Lalaut Sep 13 '21 at 15:11
  • the duplicate will sound irrelevant at first glance but read it fully and you will find the same issue as yours. In the duplicate will understand the difference between the size of one column containing one element and the size of two column containing one element (like in your case) – Temani Afif Sep 13 '21 at 15:30
  • That is not the same thing. And I don't think it's a duplicate. They said "That means that the minimum width of a column using fr units is the width of the content" ... But it seems not true with span>1. And that is what I want. So the solution minmax(0px, 1fr) does not work for me. – Julien Lalaut Sep 13 '21 at 15:58
  • OK I found a duplicate : https://stackoverflow.com/questions/50275216/can-css-grid-columns-respect-the-min-width-of-an-item-spanning-multiple-columns – Julien Lalaut Sep 13 '21 at 16:37

0 Answers0