Min and max columns with CSS grid

https://stackoverflow.com/questions/52417889/setting-minimum-and-maximum-number-of-columns-using-css-grid

Solution A - recommended (3 - 5 columns with a min-width of 64px per column)

/* Note the difference with solution B on the grid-template-columns value */
 
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
}
 
.child {
  width: 64px;
  height: 64px;
  max-width: 100%;
}

Solution B (3 - 5 columns with exactly 64px width per column)

/* Note the difference with solution A on the grid-template-columns value */
 
.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, min(100%/3, max(64px, 100%/5))));
}
 
.child {
  width: 64px;
  height: 64px;
  max-width: 100%;
}

Another example: 2 columns with a min width of 40ch or 100%

.parent {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(40ch, 100% / 2)), 1fr));
}

The 2 columns take the full width but wrap at <80ch and then the one column takes up the full width.

cssuseful