我有一个包含主题的网页，我想每行有四个主题。我放置了 4 个虚拟主题，但它们在左侧的一列中对齐，而不是在一行中对齐，如下所示：

这是我使用的 CSS 代码：

.Topic{
  text-align: center;
  width: 20%;
  background-color: #F2EECB;
  margin: 2%;
}

.Topics{
  background-color: red;
  display: grid;
  gridTemplateColumns: auto auto;
}

这是我用来渲染主题的 JSX 代码：

function Topics(){

var TopicsList = TopicsDB.map(topic => 
    <div className="Topic" style={divStyles}>
        <h2> {topic.Name} </h2>
    </div>
    )


return <div className="Topics">
        {TopicsList}
        </div>
        }

其中 Topics 是红色父 div，Topic 是各个主题。

尝试使用不同的网格显示和列​​排列方式，但没有成功。