CSS встроенная сетка: ширина самых широких элементов устанавливает ширину братьев и сестер

Question

Я пытаюсь использовать logi c из display:inline-grid;, чтобы установить минимальную ширину дочерних элементов div для самого широкого элемента. Согласно, Ширина самого широкого элемента устанавливает ширину всех братьев и сестер в строке Если просто использовать inline-grid, то самым широким элементом должна быть ширина всех элементов. Вот пример.

Кажется, они просто растягивают предметы? Мне бы хотелось, чтобы у зеленых карт была такая же ширина, как у самой длинной карты (на душу населения). Если я использую justify-items:center, он ломается.

Мне бы очень хотелось не указывать минимальную ширину и не растягивать div для заполнения контейнер, но ширина зеленых карт должна соответствовать ширине карты на душу населения (самая широкая).

Возможно ли это только с помощью css?

Вот мой кодовый блок https://codepen.io/jwillis0720/live/jObMOEO

.header-container {
  display: grid;
  grid-template-columns: 0.25fr 1fr;
}

.description-container {
  text-align: center;
  border: 2px solid orange;
}

.card {
  background-color: green;
  text-align: center;
}

.container {
  background-color: grey;
  padding: 0.25rem;
  margin: 0.25rem;
}

.counters-container {
  display: inline-grid;
  background-color: red;
  grid-gap: 10px;
  border: 2px solid blue;
  font-size: 150%;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-items: center;
}

<div id="header" class="container header-container">
  <div id="description" class="description-container">
    <div class="title-div">
      <h1>Bored</h1>
    </div>
    <div class="bottom-div">
      <h2>Jordan R. Willis</h2>
    </div>
  </div>
  <div id="counters" class="counters-container">
    <div id="cases-card" class="card tooltip">
      <h3>Total Cases</h3>
      <p id="total-cases">2,317,203</p>
      <div class="change-card"><span>▲</span><span>77,568 </span><span></span><span>85,781</span>
      </div>
    </div>
    <div id="deaths-card" class="card tooltip">
      <h3>Total Deaths</h3>
      <p id="total-deaths">159,492</p>
      <div class="change-card"><span>▲</span><span>5,688 </span><span>6,355</span></div>
    </div>
    <div id="mortality-card" class="card tooltip">
      <h3>Mortality Rate</h3>
      <p id="mortality-rate">6.88%</p>
      <div class="change-card"><span>▲</span><span>0.02 </span><span>0.02</span></div>
    </div>
    <div id="growth-card" class="card tooltip">
      <h3>Growth Rate</h3>
      <p id="growth-rate">3.46%</p>
      <div class="change-card"><span>▼</span><span>0.61 </span><span>0.24</span></div>
    </div>
    <div id="relative-card-confirm" class="card tooltip">
      <h3>Per Capita</h3>
      <p id="total-cases">1 in 2907 </p>
      <div class="change-card"><span>▲</span><span>1 in 3007 </span><span>1 in 2803 </span></div>
    </div>
  </div>
</div>

Answer 1

Проблема в том, что .header-container имеет 1fr для .counters-container, поэтому столбец растягивается до 100% ширины.

Вместо 1fr можно использовать max-content .

.header-container {
  display: grid;
  grid-template-columns: 0.25fr max-content;
}

Вам не нужно justify-content: center для .counters-container.

К сожалению, использование repeat() с auto-fit и min-max не работает. Как видно из приведенной вами ссылки, вы должны жестко указать количество столбцов. В этом случае 5.

.counters-container {
  display: inline-grid;
  background-color: red;
  grid-gap: 10px;
  border: 2px solid blue;
  font-size: 150%;
  grid-template-columns: repeat(5, 1fr);
}

Если вам нужно отцентрировать его, вы можете обернуть его в другой <div>.

Answer 2

Лично мне не нравится этот метод. Я бы использовал flex коробку или display блоки. Но так как вы ищете ответ на существующую реализацию, попробуйте это.

.counters-container {
    ...,
    padding: 0 2em;
    grid-gap: 2em;
    justify-items: center;
}

.card {
    ...,
    width: 100%;
}