Auto Fill and Fit CSS Grid

I'm trying to make a CSS grid that auto sizes and auto-fills in my items. Currently, I'm trying to make the grid items autofill, which is not working. The items are spaced way too far apart. Secondly, I want to make it fit to device size. I.e. if it is a smartphone: one column, if it is a tablet: two columns, if it is a computer: four columns. Just know the code below is part of a larger website but I'm attaching it all anyway in case it interferes with anything else.

:root{
  --grid-size: 200px;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #1F363D;
  overflow: hidden;

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #BBBBBB;
  color: #1F363D;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #808782;
  color: white;

}

body{
  margin: 0px;
}

a{
  font-family: monospace;
  font-size: 20px;
}

p{
  font-family: monospace;
}

h1 {
  font-family: monospace;
}

h2 {
  font-family: monospace;
}

.header {
  text-align: center;
  background-color: #000088;
  color: white;
  padding: 5px;
}

.grid-item img{
  width: var(--grid-size);
  height: var(--grid-size);
  border-radius: 10px;
  border-style: solid;
  border-width: 4px;
  border-color:#1F363D;
}

.grid-holder {
  display: grid;
  grid-template-columns: var(--grid-size) var(--grid-size) var(--grid-size) var(--grid-size);
  grid-templete-rows: var(--grid-size) var(--grid-size) var(--grid-size) var(--grid-size);
  gap: 20px;
  height: 100%;
  width: fit-content;
  margin: auto;
  pading: 5px;

}



.grid-item{
  text-align: center;
  padding: 5px;

  width: 200px;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.grid-item a:link {
  text-decoration: none;
  color: #1F363D
  font-size: ;
}

.grid-item a:visited {
  color: #1F363D;
}

.grid-item a:hover {
  color: #000088;
}

.grid-item a:active {
  color: #000088;
}

.row {
  display: flex;
  height: 50%;
}

.column {
  flex: 50%;
  display: grid;
  place-content: center;
  text-align: center;

}

.column img {
  width: auto;
  height: 75vh;
  display: block;
}

.column button {
  width: 50%;
  margin: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
  border-color: #000088;
  border-radius: 10px;
  font-family: monospace;
  color: #000088;
  height: 40px;
  transition-duration: 500ms;
  margin-top: 10px;

}

      .column button:hover{
        color: white;
        background-color: #000088;
        transition-duration: 500ms;
      }

<div class="header">
  <h1>Portfolio</h1>
  <h2>Projects</h2>
</div>
<div class="topnav">
  <a href="/index.html">Home</a>
  <a class="active" href="/projects.html">Projects</a>
  <a href="/contact.html">Contact</a>
  <a href="/about.html">About</a>
</div>




<div class="grid-holder">
  <a class="main-link" href="/projects/mastermind.html">
    <div class="grid-item" id="mastermind-holder">
      <img src="/images/mastermind-icon.png">
      <a class="link" href="/projects/mastermind.html"><strong>Mastermind</strong></a>
    </div>
  </a>
  <a href="/projects/simon.html">
    <div class="grid-item" id="simon-holder">
      <img src="/images/simon-icon.png">
      <a class="link" href="/projects/simon.html"><strong>Simon</strong></a>
    </div>
  </a>
</div

Solution

In the grid container, you can try using this rule to make them fluid:

grid-template-columns: repeat(auto-fill, var(--grid-size));

This will fill the container with columns of size "--grid-size", adding empty columns if there is enough space for them.

If instead you do not want new empty columns to be created, you can use auto-fit instead of auto-fill as the first parameter for the "repeat" function above.

In this MDN page you can learn more about dynamic grid columns using the "repeat" function.

Here it is an updated snippet of your code, I did some editing on the grid container class (removed auto margin and used justify-content to center the columns in the screen). Also, I removed the link that it's outside of the items, because there was a link inside too. It's not possible in html to put two links one inside of the other, since this causes some wrong html interpretation.

Here it is:

:root{
  --grid-size: 200px;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #1F363D;
  overflow: hidden;

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #BBBBBB;
  color: #1F363D;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #808782;
  color: white;

}

body{
  margin: 0px;
}

a{
  font-family: monospace;
  font-size: 20px;
}

p{
  font-family: monospace;
}

h1 {
  font-family: monospace;
}

h2 {
  font-family: monospace;
}

.header {
  text-align: center;
  background-color: #000088;
  color: white;
  padding: 5px;
}

.grid-item img{
  width: var(--grid-size);
  height: var(--grid-size);
  border-radius: 10px;
  border-style: solid;
  border-width: 4px;
  border-color:#1F363D;
}

.grid-holder {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--grid-size));
  gap: 20px;
  height: 100%;
  pading: 5px;
  justify-content: center;
}



.grid-item{
  text-align: center;
  padding: 5px;

  width: 200px;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.grid-item a:link {
  text-decoration: none;
  color: #1F363D;
}

.grid-item a:visited {
  color: #1F363D;
}

.grid-item a:hover {
  color: #000088;
}

.grid-item a:active {
  color: #000088;
}

.row {
  display: flex;
  height: 50%;
}

.column {
  flex: 50%;
  display: grid;
  place-content: center;
  text-align: center;

}

.column img {
  width: auto;
  height: 75vh;
  display: block;
}

.column button {
  width: 50%;
  margin: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
  border-color: #000088;
  border-radius: 10px;
  font-family: monospace;
  color: #000088;
  height: 40px;
  transition-duration: 500ms;
  margin-top: 10px;

}

.column button:hover{
  color: white;
  background-color: #000088;
  transition-duration: 500ms;
}

<div class="header">
  <h1>Portfolio</h1>
  <h2>Projects</h2>
</div>
<div class="topnav">
  <a href="/index.html">Home</a>
  <a class="active" href="/projects.html">Projects</a>
  <a href="/contact.html">Contact</a>
  <a href="/about.html">About</a>
</div>




<div class="grid-holder">
    <div class="grid-item" id="mastermind-holder">
      <img src="/images/mastermind-icon.png" />
      <a class="link" href="/projects/mastermind.html"><strong>Mastermind</strong></a>
    </div>
    <div class="grid-item" id="simon-holder">
      <img src="/images/simon-icon.png" />
      <a class="link" href="/projects/simon.html"><strong>Simon</strong></a>
    </div>
</div>