为什么这个模板文字参数会改变 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 网格，但我不认为它可以使元素的子元素脱离流程。我认为您已经为布局回流设置了直接子项的样式。修改模板文字条件以使用类似以下内容的内容：`${(&nbsp; track.links.link1 ?&nbsp;&nbsp; `<a id="track-image" href="${track.links.link1}" target="_blank"><img&nbsp; src="${track.image}"></img></a>` :&nbsp;&nbsp; `<span id="track-image"><img src="${track.image}"></img></span>`)}`这将使布局类保持相同的深度。旁注，请注意id渲染函数中的重复。换班。