Make grid columns adjust to its content

Question

I have a css Grid with 8 elements. The columns have a minimum of 100px and a max of 1fr.

The problem is that the content of the 1st column in lower resolutions make it place in 2 lines, I need to have this in 1 line. I want to make the columns to fit its content, even if it is larger than 1fr.

The css code I have for the grid is this,

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

I know I can solve this setting a fixed size for the 1st column like this,

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

But, the thing is that I want to use this code in other sections.

The whole code is here https://jsfiddle.net/hcx72rgy/

Answer 1

To shrink the column to the content's width via minmax() , you can use max-content for the max size and 0 for the min-size so it totaly shrinks on the widest content of the column where it stands.

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>

to remind https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

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