html - 网格大小取决于列中的最大内容

Question

我面临一个问题 - 我试图让我的 css 网格为 1 列或 2 列，同时保持这两列的宽度。

例如，我希望网格占用与列一样多的空间，但除此之外什么都没有。这是我处理的一个例子：

html

<div class="container">
  <h1>header</h1>
  <p>text text text text text texttext text text text text text text </p>
  
  <div class="grid">
    <div class="item">d</div>
    <div class="item">dummydummy</div>
    <div class="item">dummmy</div>
    <div class="item">dummummy</div>
    <div class="item">dummydmy</div>
    <div class="item">du</div>
    <div class="item">dummydummy</div>
    <div class="item">dummy</div>
    <div class="item">dummydummy</div>
    <div class="item">d</div>
  </div>
</div>

CSS

.container {
  border: solid 1px black;
  text-align: center;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 20px;
}

.item {
  display: inline-block;
  background-color: lightblue;
  text-align: left;
  
}

当列折叠成 1 (1fr) 时，我希望网格占用容纳该项目所需的最小空间。有谁知道我该怎么做？

标签： htmlcss