title: Why is this template literal argument changing the css grid layout?
body: <p>I created a simple horizontal tile layout using css grid areas within a larger grid. The content within the tiles are dynamically created from javascript and a json file. Not every tile contains the same amount of information.</p>
  <p>Three possible links may appear on the bottom of the tile. I used a ternary operator to include/exclude the html needed depending on the existence of the links. If the first link in the nest object is available it also pulls double duty as the link for a clickable icon on the lefthand side. Without the link present in the json file, the image becomes static and no link appears at the bottom of the tile.</p>
  <p>For some reason if the first link is included, the image on the left side aligns to the upper left-hand corner rather than to the center. Without the first link, the image lines up perfectly.<a href="https://i.stack.imgur.com/qm6NG.png" rel="nofollow noreferrer">The image shown represents the current output with the first link included in one tile and the first link is not included in another tile</a></p>
  <p>I cannot figure out why this is happening with the grid areas defined. The image ought to span the entire grid-areas regardless if the Link1 is present or not.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const list1List = document.getElementById('list1List');
  let trackInfo = [];
  
  
  async function loadTracks() {
      try {
          const res = await fetch('proprietaryfile.json');
          trackInfo = await res.json();
          displayBrowserTracks(trackInfo);
      } catch (err) {
          console.error(err);
      }
  };
  
  function displayList1Tracks(tracks) {
      const htmlString = tracks
          .map((track) =&gt; {
                  const app = `${track.app}`
                  const subheading = `${track.subheading}`
                  if (app == "SuperThing" &amp;&amp; subheading == "Tracks") {
                      return `
                      &lt;li class="track"&gt;
                      &lt;h6&gt;${track.name}&lt;/h6&gt;
                      ${(track.blurb ? `&lt;p id="track-blurb"&gt;${track.blurb}&lt;/p&gt;` : '')}
                      ${(track.links.link1 ? `&lt;a href="${track.links.link1}" target="_blank"&gt;&lt;img id="track-image" src="${track.image}"&gt;&lt;/img&gt;&lt;/a&gt;`:`&lt;img id="track-image" src="${track.image}"&gt;&lt;/img&gt;`)}
                      &lt;div class="track-links"&gt;
                      ${(track.links.link1 ? `&lt;a class="track-links" id="link1" href="${track.links.link1}" target="_blank"&gt;Example&lt;/a&gt;` : '')}
                      ${(track.links.link2 ? `&lt;a class="track-links" id="link2" href="${track.links.link2}" target="_blank"&gt;URL&lt;/a&gt;` : '')}
                      ${(track.links.link3 ? `&lt;a class="track-links" id="link3" href="${track.links.link3}" target="_blank"&gt;Docs&lt;/a&gt;` : '')}
                      &lt;/div&gt;
                      &lt;/li&gt;`;
              }
          })
          .join('');
          list1List.innerHTML = htmlString;
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.track-grid {
      background-color: white;
      padding: 10px 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(425px, 1fr));
      grid-template-areas: 'large-col-1 large-col-2';
      text-align: left;
      gap: 20px;
      margin: 10px;
  }
  
  .large-col-1-header,
  .large-col-2-header {
      color: white;
      background-color: #1b2646;
      padding: 5px;
  }
  
  .large-col-1-col {
      grid-area: large-col-1;
      background-color: #eef1f3;
      border-radius: 20px;
  }
  
  .alarge-col-2-col {
      grid-area: otherapps;
      background-color: #e6f2ff;
      border-radius: 20px;
  }
  
  #link1List,
  #link2List,
  #link3List {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 10px;
      padding: 10px;
      border-radius: 8px;
  }
  
  .track {
      background-color: white;
      border-radius: 8px;
      padding: 10px;
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-areas: 'image name' 'image blurb' 'image links';
      gap: 5px;
      align-items: center;
      justify-items: left;
  }
  
  #track-image {
      grid-area: image;
      width: 100px;
      height: 100px;
      align-self: center;
      justify-self: center;
  }
  
  .track&gt;h6 {
      grid-area: name;
      text-align: left;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 14px;
      font-weight: 500;
      padding-left: 10px;
  }
  
  #track-blurb {
      grid-area: blurb;
      text-align: left;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 12.5px;
      font-weight: 300;
  }
  
  .track-links {
      grid-area: links;
  }
  
  #link1 {
      margin: 10px;
  }
  
  #link2 {
      margin: 10px;
  }
  
  #link3 {
      margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="./css/custom.css"&gt;
      &lt;title&gt;Track Examples&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
       &lt;div&gt;
          &lt;h5&gt;Tracks&lt;/h5&gt;
              &lt;ul class="track-list" id="list1List"&gt;             &lt;/ul&gt;
       &lt;/div&gt;
  &lt;script src="./app.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I've changed most of the ids, classes, and some elements for this post but hopefully this paints enough of a picture.</p>
  <p>I've tried applying different grid row values, fixing the image location, changing the spacing between the rows and columns, changing the template literal, all to no avail. What am I doing wrong here?</p>