Html CSS：为什么我的三列被拆分？

我正在尝试使用Next.js制作一个react应用程序，但我在CSS方面遇到了问题

我定义了以下home.module.css：

.grid_container {
  /* display: grid; */
  /* grid-template-columns: auto auto auto; */
  /* column-count: 3;
  align-items: flex-start; */
  /* align-content: space-evenly; */
  align-items: stretch;
  column-count: 3;
  /* column-gap: 500px; */
  border: solid;
  width: 100vw;
  height: 100vh;
}

.left_pane {
  justify-content: left;
  border-style: solid;
  float: left;
  width: 25%;
  height: 300px;
}

.center_pane {
  justify-content: left;
  border-style: solid;
  float: left;
  width: 50%;
  height: 300px;
}

.right_pane {
  justify-content: left;
  border-style: solid;
  width: 25%;
  float: right;
  height: 300px;
}

然后是index.js：

export default function Home() {
  return (
    <div className={styles.grid_container}>
      <div>
        <div className={styles.left_pane}>
          <h2>Left Pane</h2>
        </div>
        <div className={styles.center_pane}>
          <h2>Center Pane</h2>
        </div>
        <div className={styles.right_pane}>
          <h2>Right Pane</h2>
        </div>
      </div>
  )
}

左窗格
中间窗格
右窗格

使用CSS网格，您可以在

网格模板列

属性中指定列宽，并使用

网格模板行

属性指定行高。您不使用浮动或

width

属性。此外，由于div元素已经是block，因此默认情况下它是全宽度的。最后，容器中的元素被认为是列。你有一个额外的包装袋

我建议看一眼

.grid\u容器{
显示：网格；
网格模板列：25%50%25%；
网格模板行：100px；
列数：3；
列数：3；
边框：实心；
}
.grid_容器.窗格{
对正内容：左；
边框样式：实心；
}

左窗格
中间窗格
右窗格

也许可以将您的代码转换为html和css，这样您就可以使用so的snippet功能。这很难理解，因为你似乎有一个位于第一列的内部容器……内部容器的用途是什么？@Paulie_D如果你指的是我取出的额外容器，它仍然是一样的。如果不是，我不知道你的意思。