1

I'm trying to use the logic of display:inline-grid; to set the minimum width of sibling divs to the widest element. According to ,Width of widest element sets width of all siblings in the row If is simply use inline-grid, then the widest element should be the width of all elements. Here is an example.

enter image description here

It seems like they are just stretching the items? The behavior I'd like is for the green cards to have the same width as the longest card (per capita card). If I use justify-items:center, it breaks.

enter image description here

I'd really like to not specify a minimum width and not stretch the divs to fill the container, but have the widths of the green cards be the width of the Per Capita (widest) card.

Is it possible with just css?

Here is my codepen 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>
jwillis0720
  • 4,329
  • 8
  • 41
  • 74
  • Maybe try `auto-fill` instead of `auto-fit`. https://codepen.io/zebraman555/pen/JjYRoGw – Michael Benjamin Apr 20 '20 at 00:39
  • Does this answer your question? [Every item to have the same width as the widest element](https://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element) – leonheess Aug 16 '21 at 18:57

2 Answers2

1

The issue is that .header-container has 1fr for the .counters-container, so the column is streching to 100% of the width.

Instead of 1fr, you can use max-content.

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

You don't need justify-content: center for .counters-container.

Unfortunately, using repeat() with auto-fit andmin-max doesn't work. As you can see in the link you provided, you have to hard-code the number of columns. In this case 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);
}

If you need to center it, you can wrap it in another <div>.

Azametzin
  • 5,223
  • 12
  • 28
  • 46
  • .card-container is not stretching as its just going to max-content. Sort of the right track but still would like it if I could stretch card container but not the individual `.card` div – jwillis0720 Apr 20 '20 at 08:23
-2

Personally I don't like this method. I would use flex box or display blocks. But since you're looking for an answer to the existing implementation then try this.

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

.card {
    ...,
    width: 100%;
}
noon
  • 7
  • 4