CSS fr / fractional units minimum too large

Question

What I have:

What I want:

Problem:

The hopefully relevant section is:

  grid-template-columns: repeat(auto-fit, 1fr);

where both elements in my section have width: max-content;.

This (and the expanded but technically identical form of repeat(auto-fit, minmax(auto, 1fr));) do not do what I expect - it creates picture 1, I expect it to look like picture 2. It looks like the minimum width for these elements is too large, so instead of being on one row, it puts them in columns.

I made picture 2 by changing the code to repeat(auto-fit, minmax(200px, 1fr));. This is not a great solution as I want the minimum element size to be based on the grid elements' widths, not some arbitrary value.

I do want to have the elements able to be on different rows (for instance, if the browser is very narrow), so CSS grid seems useful for this task. I'm obviously just misunderstanding some key aspect.

Question

What value can I use in my grid-template-columns to make my elements work the way I expect with CSS grid? Is there a way to do it with repeat(auto-fit, X); or do I have to specify the number?

Answer

As stated below, you cannot use repeat(auto-fit with fr as it does not specify an absolute minimum or maximum, which the spec says is invalid. Michael_B gave the answer (in his jdfiddle example comment) of using

  display: flex;
  flex-wrap: wrap;

which does exactly what I expected repeat(auto-fit, 1fr); to do.

score 1 · Answer 1 · answered Feb 09 '20 at 18:14

You can use min-content

.page-container {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 20% 80%;
  grid-template-rows: auto auto 20rem;
  grid-template-areas: "header header" "sidebar content" "footer footer";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 25px;
  padding: 50px;
}

.header {
  grid-area: header;
  display: grid;
  grid-template-columns: repeat(2, min-content);
  grid-gap: 10px;
}

.header>* {
  background-color: lightgreen;
}

.header a:link {
  color: inherit;
  text-decoration: none;
}

.header a:hover {
  /* https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
  text-decoration: underline;
}

.header h1,
h2 {
  margin: 0;
  width: max-content;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

<div class="page-container">

  <section class="box header">
    <h1><a href="https://jeremy.richards.dev">
  Jeremy.Richards.dev
  </a></h1>
    <h2>
      and this on the
    </h2>
  </section>

  <div class="box sidebar">
    Sidebar
  </div>

  <div class="box content">
    Content
  </div>

  <div class="box footer">
    <h2 style="font-size: 2rem;">
      Something
    </h2>
    <h3 style="font-size: 1.5rem;">
      My name underneath
    </h3>
    <p>
      Linkedin/github/SO
    </p>
  </div>

</div>

That would never cause my elements to move down to being multiple rows when the browser window became smaller, which is part of what I'm trying to do. — jeremysprofile, Feb 09 '20 at 18:18
@jeremysprofile check it out https://stackoverflow.com/questions/52504049/why-doesnt-min-content-work-with-auto-fill-or-auto-fit — doğukan, Feb 09 '20 at 18:22
Is there any way to do what I want, where I have multiple elements on a row that expand to fill the row, and move to multiple columns if there stops being enough room? — jeremysprofile, Feb 09 '20 at 18:27

Michael Benjamin · Accepted Answer · 2020-02-09T18:24:32.157

1

This rule won't work.

grid-template-columns: repeat(auto-fit, 1fr)

The problem is explained here: minmax fails (invalid property value)

This rule won't work:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

The problem is explained here: minmax() defaulting to max

edited Feb 09 '20 at 18:24

answered Feb 09 '20 at 18:15

Michael Benjamin

346,931
104
581
701

Thanks for the links, Michael. Is there any way to do what I want, where I have multiple elements in a row that will move to be in columns if there is not enough room, and will expand to fill the room if there is extra space available? – jeremysprofile Feb 09 '20 at 18:25
Michael, the second rule actually does work; it's just not as clean as I'd like, since the `200px` number would have to be experimentally determined based on the size of my element to avoid the elements overlapping. – jeremysprofile Feb 09 '20 at 18:33
Thanks for the flexbox link. It looks like that's the best way forward. Thanks so much for your help! – jeremysprofile Feb 09 '20 at 23:32

CSS fr / fractional units minimum too large

2 Answers2

Linked