Bagaimanakah saya boleh meletakkan div ini pada baris yang sama?

Question

Saya mempunyai halaman web dengan tema dan saya mahu mempunyai empat tema setiap baris. Saya meletakkan 4 topik tiruan tetapi ia dijajarkan dalam lajur di sebelah kiri dan bukannya baris seperti ini:

Ini adalah kod CSS yang saya gunakan:

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

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

Ini ialah kod JSX yang saya gunakan untuk memaparkan tema:

function Topics(){

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


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

Di mana Topik ialah div induk merah, dan Topik ialah setiap tema.

Cuba menggunakan paparan grid dan susunan lajur berbeza tetapi tidak berjaya.

Answer 1

div {
  outline: 2px dashed blue;
  display: inline-block;
  
  height: 48px;
  width: 56px;
}