Difference Between Auto-Fill and Auto-Fit

What is the difference between auto-fill and auto-fit?

The key is to use auto-fill instead of auto-fit.

When the repeat() function is set to auto-fit or auto-fill, the grid container creates as many grid tracks (columns/rows) as possible without overflowing the container.

Note that as the grid container is being rendered, the presence of grid items is irrelevant. The container just lays out the columns and rows as instructed, creating grid cells. It doesn't care if the cells are occupied or unoccupied.

With auto-fit, when there are not enough grid items to fill the number of tracks created, those empty tracks are collapsed.

Taking your code as an example, when there aren't enough grid items to fill all the columns in the row, those empty columns are collapsed. The space that was used by the empty columns becomes free space, which is then evenly distributed among existing items. By absorbing the free space, the items grow to fill the entire row.

With auto-fill, everything is the same as auto-fit, except empty tracks are not collapsed. They are preserved. Basically, the grid layout remains fixed, with or without items.

That's the only difference between auto-fill and auto-fit.

Here's an illustration of three grid items with auto-fill:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

enter image description here

Here's an illustration of three grid items with auto-fit:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

enter image description here

spec reference: https://www.w3.org/TR/css3-grid-layout/#auto-repeat

Auto Fill and Fit CSS Grid

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>

what is auto-fit in grid-tempelate-columns?

repeat() => is used in grid-template-columns and grid-template-rows. It repeats the fragment according to your screen size.

auto-fit => it will fit as many columns on your screens according to your screen size.

minmax() => this function will choose a size range greater than or equal to min and less than or equal to max.which means between 300px and 1fr(fr = fractional unit default size of a column).

this line of css will create responsive columns according to your screen size and adjust the number of columns as the screen size increases or decreases

Using auto-fill to create columns in css grid

The columns are defined using the repeat() function and have a minimum width of 200px, and a maximum set to 1fr, so that they would expand and equally share any extra space when it is available. As for the number of columns per row, we’re going to use the auto-placement keywords, so that we let the browser take care of the responsiveness of the grid and will wrap the columns into new rows when needed.

The browser will place and size the columns in the first example using the auto-fill keyword. - from this website https://css-tricks.com/

How to stop line breaking with this CSS Grid autofill experiment

You are looking for auto-fit, not auto-fill:

I found a very good explanation on this here:

auto-fill fills the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to fill the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

auto-fit fits the currently available columns into the space by expanding them so that they take up any available space. The browser does that after filling that extra space with extra columns (as with auto-fill) and then collapsing the empty ones.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    border: 0.5px solid Magenta;
}

.flex-display {
    display : flex;
    border: 0.5px solid Green;
}

.dbForm *{
    font-size: x-small;
}

.dbForm-nonTable {
    margin: 2px;
    padding: 2px;
    border: 0.5px solid #000000;
    overflow: auto;
    background-color: #ffec80; /* light gold */
    min-height: 10px;
    min-width: 30px;
}

.dbForm-label {
    margin: 2px;
    padding: 2px;
    overflow: auto;
    min-height: 10px;
}

<body>
<div class="dbForm" dbase-source="invoices" >

    <div class="grid-container">
        <div class="flex-display">
            <div class="dbForm-label">Date:</div>
            <div class="dbForm-nonTable">bumble doo</div>
        </div>
        <div class="flex-display">
            <div class="dbForm-label">Client code:</div>
            <div class="dbForm-nonTable">Dodo</div>
        </div>
        <div class="flex-display">
            <div class="dbForm-label">Notes:</div>
            <div class="dbForm-nonTable">Nabble</div>
        </div>
    </div>

</div>
</body>

Using auto-fill or auto-fit in grid-template-rows: repeat(auto-fill, 200px) only sets the height for the first row - why is this?

From the specfication:

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, and taking gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

It's a bit tricky but auto-fill is suitable for column definition because we have a max size since by default the element will be full width but it's not the case when dealing with row and height.

Unless you define an explicit height, you will most probably fall into the case of only one repetition like you are facing:

.container {
  display:grid;
  grid-template-rows:repeat(auto-fill,200px);
  grid-gap:5px;
}

.container div {
   height:50px;
   background:red;
}

body {
  border:5px solid blue;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>