Css内联网格：最宽元素的宽度设置同级元素的宽度 [英] CSS inline grid: width of widest element sets widths of siblings

问题描述

我尝试使用display:inline-grid;的逻辑将兄弟div的最小宽度设置为最宽元素。根据Width of widest element sets width of all siblings in the row如果只是使用内联网格，那么最宽的元素应该是所有元素的宽度。这里有一个例子。

看起来他们只是在拉长项目？我想要的行为是绿卡的宽度与最长的卡(人均卡)相同。如果我使用justify-items:center，它会断开。

我真的希望不指定最小宽度，也不拉伸div来填充容器，而是将绿卡的宽度设置为人均(最宽)卡的宽度。

仅使用CSS可以吗？

这是我的代码https://codepen.io/jwillis0720/live/jObMOEO

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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>

推荐答案

问题是.header-container对.counters-container有1fr，因此列伸展到100%的宽度。

您可以使用max-content代替1fr。

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

您不需要justify-content: centerFor.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>中。

这篇关于Css内联网格：最宽元素的宽度设置同级元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！