CSS франк / дробные единицы минимум слишком велик

Question

У меня есть jsfiddle .

Что у меня есть :

Что я хочу :

Задача :

Надеемся, что соответствующий раздел:

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

где оба элемента в моем разделе имеют width: max-content;.

Этот (и расширенная, но технически идентичная форма repeat(auto-fit, minmax(auto, 1fr));) не делает то, что я ожидаю - он создает изображение 1, я ожидаю, что оно будет похоже на изображение 2 Похоже, что минимальная ширина для этих элементов слишком велика, поэтому вместо того, чтобы находиться в одной строке, она помещает их в столбцы.

Я сделал рисунок 2, изменив код на repeat(auto-fit, minmax(200px, 1fr));. Это не очень хорошее решение, так как я хочу, чтобы минимальный размер элемента основывался на ширине элементов сетки, а не на произвольном значении.

Я хочу, чтобы элементы могли находиться в разных строках (например, Если браузер очень узкий), то сетка CSS кажется полезной для этой задачи. Я, очевидно, просто неправильно понимаю какой-то ключевой аспект.

Вопрос

Какое значение я могу использовать в своем grid-template-columns, чтобы мои элементы работали так, как я ожидаю от CSS сетка? Есть ли способ сделать это с помощью repeat(auto-fit, X); или мне нужно указать номер?

Ответ

Как указано ниже, вы не можете использовать repeat(auto-fit с fr, поскольку в нем не указан абсолютный минимум или максимум, который задан c говорит неверно. Michael_B дал ответ (в своем примере с примером jdfiddle) об использовании

  display: flex;
  flex-wrap: wrap;

, что в точности соответствует ожиданиям repeat(auto-fit, 1fr);.

Answer 1

Это правило не будет работать.

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

Проблема объясняется здесь: minmax терпит неудачу (недопустимое значение свойства)

---

Это правило выиграно не работает:

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

Проблема объясняется здесь: minmax () по умолчанию max

Answer 2

Вы можете использовать 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>