我使用較大網格內的 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、類和一些元素，但希望這足以描繪出一幅圖畫。我嘗試過應用不同的網格行值、修復圖像位置、更改行和列之間的間距、更改模板文字，但都無濟于事。我在這里做錯了什么？