如何让 div 占据 CSS 网格中的下一行？答案

【问题标题】：How to make div occupy next row in CSS grid?如何让 div 占据 CSS 网格中的下一行？
【发布时间】：2021-08-05 15:25:55
【问题描述】：

我正在尝试在 React 上制作一个带有网格的可滚动表格。我的问题是，在渲染数据时，它都进入了第一行。我希望它的数据而不是占据网格中的下一行。网格的行和列呈现得很好，但数据本身只呈现在第一行。

CSS：

.scroller {
    margin: 0 auto;
    height: 50rem;
    width: 100%;
    overflow: auto;
    grid-area: scroll-list;

    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    grid-template-rows: repeat(auto-fill, 50px);
    /* grid-auto-rows: 50px; */
    grid-template-areas: "test test test";
}

.test {
    grid-area: test;
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "name pos ovr";
}

.name {
    grid-area: name;
}

.pos {
    grid-area: pos;
}

.ovr {
    grid-area: ovr;
}

HTML：

class ScrollList extends Component {
  constructor() {
    super();
  }
 //TODO: I need to make the second row start on the second row!
  render() {
    let count = 0;
    return(
      <div className="scroller">
        {listVals.map((player) => {
          let id = listKeys[count];
          count += 1;
          return(
            <div key={id} className="test">
              <div id={id} className="item name">{player[0]}</div>
              <div className="item pos">{player[1]}</div>
              <div className="item ovr">{player[2]}</div>
            </div>

          );
        })}
      </div>
    );
  }
}

我在这里发现了一个非常相似的问题（css grid can't display data on next row），但答案没有任何赞成票，而且我不熟悉表格标签（试图用网格专门解决这个问题）。

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

尝试网格区域：2；阅读此https://www.w3schools.com/cssref/pr_grid-area.asp 了解更多信息。

【讨论】：

非常感谢您的评论。对此进行调查提供了一种受相同方法启发的不同解决方法

【解决方案2】：

（代表问题作者发布，将解决方案移至答案空间）。

我想通了，这是一个非常简单的解决方法。我必须进行以下更改：

.scroller { 
grid-template-columns: 1fr
**removed** grid-template-areas: "test test test";
}

.test {
**removed** grid-areas: test;
}

要点：如果没有必要，不要将行或列放入网格容器中。在我的 .scroller 网格中放置 3 列而不是在我的 .test 网格中放置三列是不必要的，因为 .test 网格是使用三列的网格。这导致了问题。

【讨论】：