Why Doesn't Min-Content Work with Auto-Fill or Auto-Fit

.grid {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.box,
.special-box {
  height: 200px;
}

.box:nth-child(even) {
  background-color: pink;

}

.box:nth-child(odd) {
  background-color: orange;

}

.special-box {
  background-color: purple;
}

@media (min-width:650px) {
  .special-box {
   grid-column: span 2;
  }
}

<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 <div class="special-box"></div>
</div>

CSS Grid auto fit with max-content

I had a similar question when playing around with grid:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))

If we take a look at the documentation we can see that minmax command is valid:
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

But in a repeat documentation on csswg, it states one simple rule that disallows all of this from happening;
https://drafts.csswg.org/css-grid/#funcdef-repeat

The generic form of the repeat() syntax is, approximately,

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

The first argument specifies the number of repetitions. The second
argument is a track list, which is repeated that number of times.

However, there are some restrictions:

• The repeat() notation can’t be nested.

• Automatic repetitions (auto-fill or auto-fit) cannot be combined with
  intrinsic or flexible sizes.

Whats an intrinsic or flexible sizes ?

• An intrinsic sizing function (min-content, max-content, auto, fit-content()).

So the command wont work in grid because each column/row will be different sizes and wrapping cannot take place. See bellow picture as example.

This behavior should be executed using flex-box instead.

CSS - grid auto-fit not working when using minmax with max being specific length

Is auto-fill or just auto be what you would expect ?

.working {
  width: 100%;
  height: 5rem;
  margin-bottom: 3rem;
  justify-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, auto));
  gap: 1rem;
}

.item {
  background-color: red;
  min-width:min-content;
}
.not.working {

  grid-template-columns: repeat(auto-fit, minmax(5rem, auto));
}

<div class='working'>
  <div class='item'>plap plap plap plap</div>
  <div class='item'>plip plip</div>
  <div class='item'>plop plop plop plop plop plop plop plop plop plop</div>
  <div class='item'>.</div>
</div>

<div class='not working'>
  <div class='item'>plap plap plap plap</div>
  <div class='item'>plip plip</div>
  <div class='item'>plop plop plop plop plop plop plop plop plop plop</div>
  <div class='item'>.</div>
</div>

.main {
  max-width:1000px; 
  background-color:skyblue; 
  margin-left:auto; 
  margin-right:auto;
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr) 19rem);
  padding: 20px;
}

.parent .child:first-child {
  background-color: #eeeeee;
  height: 300px;
}
.parent .child:last-child {
  background-color: #cccccc;
 height: 300px;
}
@media  (max-width : 600px)  {
.parent {
  grid-template-columns: 1fr;
  }
}

<div class="main">
<div class="parent">
  <div class="child">first</div>
  <div class="child">second</div>
</div>
</div>

body,html {  height: 100%;  margin: 0;}
.wrapper {  display: grid;  grid-template-rows: repeat(auto-fill, minmax(140px, 200px));  grid-auto-flow: column; /* added */  height: 100%; /* adjust this*/}
.wrapper>div:nth-child(odd) {  background-color: red;}

<div class="wrapper">  <div class="one"> 1 </div>  <div class="one"> 2 </div>  <div class="one"> 3 </div>  <div class="one"> 4 </div>  <div class="one"> 5 </div></div>

.outer-grid {  display: grid;  grid-template-columns: 1fr repeat(1, minmax(100px, 700px)) 1fr;}
.inner-grid {  grid-column: 2;  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));}
.item {  background: red;  border: 1px solid black;}

<div class="outer-grid">  <div class="inner-grid">    <div class="item">Item</div>    <div class="item">Item</div>    <div class="item">Item</div>    <div class="item">Item</div>    <div class="item">Item</div>  </div></div>