为什么此模板文字参数会更改 css 网格布局？

Question

我使用较大网格中的 css 网格区域创建了一个简单的水平图块布局。磁贴中的内容是从 javascript 和一个 json 文件动态创建的。并非每个图块都包含相同数量的信息。

三个可能的 link 可能会出现在图块的底部。根据 link 的存在，我使用三元运算符 include/exclude 所需的 html。如果嵌套对象中的第一个 link 可用，它还会作为左侧可单击图标的 link 承担双重职责。如果 json 文件中没有 link，图像将变为静态，并且没有 link 出现在磁贴底部。

出于某种原因，如果包含第一个 link，左侧的图像会与左上角而不是中心对齐。没有第一个link，图像完全对齐。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

我不明白为什么定义的网格区域会发生这种情况。无论 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;
};

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

我已经更改了大部分 ID，类，以及此 post 的一些元素，但希望这足以描绘一幅画面。

我试过应用不同的网格行值、固定图像位置、更改行和列之间的间距、更改模板文字，但都无济于事。我在这里做错了什么？

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

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

旁注，注意在渲染函数中重复 id。换成 classes.

为什么此模板文字参数会更改 css 网格布局？

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

javascript

conditional-operator

css-grid