从 foreach 获取数据时未使用网格的左上角 space

Question

我正在从 Firestone 获取一些数据，其中包含我想在网格中显示的图像和文本。我使用的是 foreach，因此网站可以轻松更改 firestore 中的数据。

但是当我将它设计成网格时，它会在左上角留下一个 space，就好像它把内容放在那里（但看不见）。我不确定为什么它会错过这个 space（我附上了发生的事情的图片）

我希望我的网格从左侧开始，而不是像现在这样从右侧开始。

 const i = query(collection(db, "teams"));
        const unsubscribe = onSnapshot(i, (querySnapshot) => {
            const teams = document.querySelector('.teams');

            querySnapshot.forEach((doc) => {
                const docData = doc.data();
                const article = teams.appendChild(document.createElement('article'));
                article.innerHTML = `
        <h1 class="team-names"></h1>
        <div class="team-line"></div>
        <img class="team-image">
    `;
                article.children[0].textContent = docData.ageGroup;
                article.children[2].src = docData.teamImage;

                console.log("Current data: ", docData);
            });
        });

.teams {
  display: grid;
  place-items: left;
  max-width: 950px;
  margin: 0 auto 30px;
  padding: 10px;
}

.team-names {
  width: 180px;
  color: #000000;
  border-radius: 8px;
  text-align: left;
}

.team-line {
  background-color: #c00000;
  height: 5px;
  width: 40px;
  padding-top: 5px;
}

.team-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  padding: 20px 0px 30px 0px;
}

<section class="teams">
   <article></article>
</section>

https://i.stack.imgur.com/uE2N8.png

Answer 1

尝试删除 section 元素中的空 article :

<section class="teams">
   <article></article>
</section>

从 foreach 获取数据时未使用网格的左上角 space

Top left space of grid not being used when fetching data from a foreach

html

css

css-grid