Why content size is different if we have more columns in CSS grid?

Question

Why does this:

div {
  width: 200px;
  display: grid;
  grid: "first second" / 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

Behave differently from this:

div {
  width: 200px;
  display: grid;
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

Note that the only thing I changed was the number of columns and the area each input occupies.

Hmmm, I'm sure this has something to with `1fr` defaulting to 100% for single items. It can also be solved by setting the children to `min-width: 0;` — Paulie_D, Oct 09 '18 at 14:27
Is there any doc about that defaulting to 100% for single items? I thought it would be something like that. If you post it as an answer I would accept it — gfpacheco, Oct 09 '18 at 14:32
Ahhh...no It's is the iterpretation of `1fr` meaning `auto` *first*. I've added an answer. — Paulie_D, Oct 09 '18 at 14:33

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

This is an issue with the spec and how 1fr is intepreted.

From a W3C bug/issue report

The "problem" is that 1fr resolves to minmax(auto, 1fr) and this means that we need to know the size of (the parent) before resolving the size of the 1fr track (because the min track sizing function is content sized, it's auto).

There is a quick solution to this issue from the author POV, just replacing 1fr by minmax(0px, 1fr) for example.

..or in this case just setting min-width:0 to the child elements.

score 1 · Answer 2 · answered Oct 09 '18 at 14:26

I think its a rendering issue casued by the default width set by the browser for the inputs. Its fixed by adding 100% width for the inputs and setting up the border-box box model.

div {
  width: 200px;
  display: grid;
  grid: "first second" / 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

input {
  width: 100%;
}

* {
  box-sizing: border-box;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

Thanks for the answer, I also thought it had something to do with the default min-width of the input. But Paulie's answer is more complete — gfpacheco, Oct 09 '18 at 14:34

score 0 · Answer 3 · answered Oct 09 '18 at 16:31

Note that this problem is not really a CSS Grid issue. It's more a matter related to input elements.

Here's your code, using input elements:

div {
  display: grid;
  width: 200px;  
  background-color: #ccc;
  padding: 8px;
}

div[one] {
  grid: "first second" / 1fr 1fr;
}

div[two] {
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div one>
  <input id="first" />
  <input id="second" />
</div>

<hr>

<div two>
  <input id="first" />
  <input id="second" />
</div>

There's a difference in the two layouts.

Now here's your code using section elements instead of inputs:

article {
  display: grid;
  width: 200px;  
  background-color: #ccc;
}

article[one] {
  grid: "first second" / 1fr 1fr;
}

article[two] {
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
}

#first {
  grid-area: first;
  height: 25px;
  background-color: green;
}

#second {
  grid-area: second;
  height: 25px;
  background-color: red;  
}

<article one>
  <section id="first"></section>
  <section id="second"></section>
</article>

<hr>

<article two>
  <section id="first"></section>
  <section id="second"></section>
</article>

There's no difference.

This essentially boils down to the intrinsic width of input elements, which is a standard feature in most browsers. The issue is discussed in more detail here:

input / button elements not shrinking in a flex container

The simple way to disable this feature is by:

overriding the default min-width: auto on grid items by adding min-width: 0 (explanation) or,
by switching from 1fr (which represents minmax(auto, 1fr)) to minmax(0px, 1fr).

I appreciate the answer, but that wasn't the question. I understand that inputs have a default min-width set by the browser. The point was: why adding more columns fixed it? And the answer was: on single column elements `1fr` is translated to `minmax(auto, 1fr)` — gfpacheco, Oct 09 '18 at 19:33

Why content size is different if we have more columns in CSS grid?

3 Answers3