Grid

grid-template-columns

CSS
.container {
  display: grid;
  grid-template-columns: 100px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  grid-template-columns: 100px 200px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  grid-template-columns: 100px 200px 300px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

Using repeat() function in css

CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 200px) 300px;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

Using minmax() function in css

CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}
Box-1
Box-2
Box-3
Box-4
Box-5
Box-6
Box-7
Box-8
Box-9

Minimum 200px and maximum fraction value