JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

Auto-fit
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>

</div>

Auto-fill
<div class="wrapper2">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
 
</div>

No Min()
<div class="wrapper3">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
 
</div>
No Minmax()
<div class="wrapper4">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
 
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100px,100%), 1fr));
  grid-gap: 10px;
}

.wrapper2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100px,100%), 1fr));
  grid-gap: 10px;
}

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

.wrapper4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content(200px));
  grid-gap: 10px;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}