CSS 内联网格：最宽元素的宽度设置兄弟元素的宽度

Question

我正在尝试使用display:inline-grid;的逻辑。 将兄弟 div 的最小宽度设置为最宽的元素。 根据， 最宽元素的宽度设置行中所有兄弟元素的宽度如果简单地使用内联网格，那么最宽元素应该是所有元素的宽度。 这是一个例子。

好像他们只是在拉伸物品？ 我想要的行为是绿卡与最长卡（人均卡）具有相同的宽度。 如果我使用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%。

您可以使用max-content而不是1fr 。

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

您不需要justify-content: center for .counters-container 。

不幸的是，使用带有auto-fit和min-max的repeat()不起作用。 正如您在提供的链接中看到的那样，您必须对列数进行硬编码。 在这种情况下 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%;
}