如何让网页中的Topic div元素每行排列4个？

问题根源 #

你在CSS里犯了两个关键错误：

• 外部CSS属性名误用了React内联样式的驼峰写法（gridTemplateColumns），标准CSS属性名应为短横线分隔的grid-template-columns
• 仅设置了2列，不符合每行显示4个主题的需求

修改后的CSS代码 #

.Topic{
  text-align: center;
  background-color: #F2EECB;
}

.Topics{
  background-color: red;
  display: grid;
  /* 设置每行4个等宽列 */
  grid-template-columns: repeat(4, 1fr);
  /* 用gap设置主题间间距，替代margin避免布局溢出 */
  gap: 2%;
  padding: 1%;
}

额外说明 #

• 移除了.Topic的固定宽度，让Grid布局自动分配列宽，避免宽度+margin导致的换行问题
• 若需保留.Topic的自定义宽度，可设置为calc(25% - 2%)，但使用repeat(4,1fr)配合gap的写法更简洁易维护
• 检查JSX中的divStyles，确保未设置display: block或width: 100%这类会破坏Grid布局的样式

内容的提问来源于stack exchange，提问作者Atlanticus