Why is this template literal argument changing the css grid layout?

Question

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.

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.

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.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

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.

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) => {
                const app = `${track.app}`
                const subheading = `${track.subheading}`
                if (app == "SuperThing" && subheading == "Tracks") {
                    return `
                    <li class="track">
                    <h6>${track.name}</h6>
                    ${(track.blurb ? `<p id="track-blurb">${track.blurb}</p>` : '')}
                    ${(track.links.link1 ? `<a href="${track.links.link1}" target="_blank"><img id="track-image" src="${track.image}"></img></a>`:`<img id="track-image" src="${track.image}"></img>`)}
                    <div class="track-links">
                    ${(track.links.link1 ? `<a class="track-links" id="link1" href="${track.links.link1}" target="_blank">Example</a>` : '')}
                    ${(track.links.link2 ? `<a class="track-links" id="link2" href="${track.links.link2}" target="_blank">URL</a>` : '')}
                    ${(track.links.link3 ? `<a class="track-links" id="link3" href="${track.links.link3}" target="_blank">Docs</a>` : '')}
                    </div>
                    </li>`;
            }
        })
        .join('');
        list1List.innerHTML = htmlString;
};

.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>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;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/custom.css">
    <title>Track Examples</title>
</head>

<body>
     <div>
        <h5>Tracks</h5>
            <ul class="track-list" id="list1List">             </ul>
     </div>
<script src="./app.js"></script>
 </body>

</html>

I've changed most of the ids, classes, and some elements for this post but hopefully this paints enough of a picture.

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?

Answer 1

I believe the issue here is the depth level of #track-image caused by the inline in the template. I'm not really good with CSS grid, but I don't think it can rip the child of an element out of flow. I think you have style the direct children for layout reflow.

Modify the template literal condition to use something like:

`
${(
  track.links.link1 ? 
  `<a id="track-image" href="${track.links.link1}" target="_blank"><img  src="${track.image}"></img></a>` : 
  `<span id="track-image"><img src="${track.image}"></img></span>`
)}
`

That will keep the layout class at the same depth.

Side note, watch repeating id in your rendering function. Swap to classes.