为什么这个模板文字参数会改变 css 网格布局？

Question

我使用较大网格内的 CSS 网格区域创建了一个简单的水平平铺布局。磁贴中的内容是根据 javascript 和 json 文件动态创建的。并非每个图块都包含相同数量的信息。磁贴底部可能会出现三个可能的链接。我使用三元运算符根据链接的存在来包含/排除所需的 html。如果嵌套对象中的第一个链接可用，它还会起到双重作用，作为左侧可单击图标的链接。如果 json 文件中没有链接，图像将变为静态，并且图块底部不会出现链接。由于某种原因，如果包含第一个链接，左侧的图像将与左上角而不是中心对齐。如果没有第一个链接，图像就会完美排列。显示的图像表示当前输出，其中第一个链接包含在一个图块中，而第一个链接不包含在另一个图块中我无法弄清楚为什么定义的网格区域会发生这种情况。无论 Link1 是否存在，图像都应该跨越整个网格区域。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;};我已经更改了这篇文章的大部分 id、类和一些元素，但希望这足以描绘出一幅图画。我尝试过应用不同的网格行值、修复图像位置、更改行和列之间的间距、更改模板文字，但都无济于事。我在这里做错了什么？

Answer 1

我认为这里的问题是#track-image由模板中的内联引起的深度级别。我不太擅长 CSS 网格，但我不认为它可以使元素的子元素脱离流程。我认为您已经为布局回流设置了直接子项的样式。

修改模板文字条件以使用类似以下内容的内容：

`

${(

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

)}

`

这将使布局类保持相同的深度。

旁注，请注意id渲染函数中的重复。换班。