我有一個包含主題的網頁，我想每行有四個主題。我放置了 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 是各個主題。

嘗試使用不同的網格顯示和列排列方式，但沒有成功。