使网格列适应其内容答案

【问题标题】：Make grid columns adjust to its content使网格列适应其内容
【发布时间】：2020-06-10 10:13:03
【问题描述】：

我有一个包含 8 个元素的 CSS 网格。列的最小值为 100px，最大值为 1fr。

问题是分辨率较低的第一列的内容使其位于 2 行中，我需要将其放在 1 行中。我想让列适合其内容，即使它大于 1fr。

我的网格css代码是这样的，

.grid-1{ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

我知道我可以像这样为第一列设置一个固定大小，

.grid-2{ grid-template-columns: 210px repeat(auto-fit, minmax(100px, 1fr)); }

但是，问题是我想在其他部分使用此代码。

完整代码在这里https://jsfiddle.net/hcx72rgy/

【问题讨论】：

不就是把那个特定输入的输入变成内联元素吗？
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
grid-template-columns: minmax(210px, 1fr) repeat(auto-fit, minmax(100px, 1fr)); 有什么问题
如果我在第一列有一个宽度较短的元素（在其他部分），它将保持那些 210px。

标签： html css css-grid

【解决方案1】：

要通过 minmax() 将列缩小到内容的宽度，您可以将 max-content 用作最大大小，将 0 用作最小大小，这样它就可以在其所在列的最宽内容上完全收缩。

repeat(auto-fit, minmax(0,max-content));

https://jsfiddle.net/ce6zgur8/

* {
  box-sizing: border-box;
}
.grid-1{grid-template-columns: repeat(auto-fit, minmax(0,max-content));}
.grid-2{grid-template-columns: 210px repeat(auto-fit, minmax(0,max-content))}


body {
  padding: 0 0 20px 0;
  background-color: #eee;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 300;
  color: #555;
  width: 100%;
  height: 100%;
}
h2{
  margin:30px 0 10px 0;
  font-size:20px;
  color: black;
}
.wrapper {
  padding: 10px;
  font: normal normal 14px/12px "Roboto", Calibri, Arial, sans-serif;
  width:1366px;
  border:1px solid red;
  margin: 5em auto;
}

.grid-thing {
  margin: 0 0 20px 0;
  display: grid;
}

.grid-thing > div{
  text-align: center;
  border:1px solid green;
}

<div class="wrapper">
  <h2>GRID 1</h2>
  <div class="grid-thing grid-1">
    <div>
      <label for="">Search</label>
      <input type="text" placeholder="Number, text, whatever...">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <button>Button 1</button>
    </div>
    <div>
      <button>Button 2</button>
    </div>
    <div>
      <input type="checkbox">
      <label for="">Check?</label>
    </div>
    <div>
      <button>Button 3</button>
    </div>
    <div>
      <button>Button 14</button>
    </div>
  </div>
  <hr>
  <h2>GRID 2</h2>
  <div class="grid-thing grid-2">
    <div>
      <label for="">Search</label>
      <input type="text" placeholder="Number, text, whatever...">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <label for="">From</label>
      <input type="date">
    </div>
    <div>
      <button>Button 1</button>
    </div>
    <div>
      <button>Button 2</button>
    </div>
    <div>
      <input type="checkbox">
      <label for="">Check?</label>
    </div>
    <div>
      <button>Button 3</button>
    </div>
    <div>
      <button>Button 14</button>
    </div>
  </div>
</div>

提醒https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

另见fit-content(x);https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

【讨论】：