Posizionamento in PX
<div class="wrapper px">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<hr />
Posizionamento in FR
<div class="wrapper fr">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<hr />
Posizionamento in FR 2
<div class="wrapper fr2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>
<hr />
Posizionamento in FR repeat()
<div class="wrapper fr-r">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

.wrapper.px {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
.wrapper.fr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.wrapper.fr2 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
.wrapper.fr-r {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

/* Dress */
.wrapper {
  padding: 20px;
}
.wrapper > div {
  padding: 5px;
  background-color: #f0f0f0;
  border: 1px solid #f9f9f9;
}