javascript - 当我尝试在网格布局中添加组件时，我的代码不起作用

Question

我希望我的应用程序成为一个可以聊天和分享笔记的应用程序。所以我已经构建了这两个东西。两者都是独立的组件。因此，当我尝试使用网格将页面分成两半（一半将是聊天组件，另一半将是笔记应用程序）时，我得到了奇怪的结果。

这是我使用网格时的样子，看起来不错吧？

这是我添加聊天组件时的样子，奇怪且未对齐

所以聊天组件是从这个 youtuber Called Fireship 复制而来的。也许我没有更改代码以正确适应另一半。但我尽力利用我对 CSS 的了解。所有这些都在主组件中，这是主组件的代码：

import './App.css';
import Header from './components/Header';
import NotesListPage from './pages/NotesListPage';
import NotePage from './pages/NotePage';
import {useState, useEffect} from 'react';
import Chat from './components/Chat';
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="parent">
      <div className="container dark">
        <div className="app">
        <Header />
        <Route path="/" exact component={NotesListPage} />
        <Route path="/note/:id" component={NotePage} />
        </div>
      </div>
      <Chat />
      </div>
    </Router>

  );
}
export default App;

这可能是因为我安排代码的方式。但是我已经尝试了所有的组合，它似乎不起作用。这可能是由css引起的问题。其余的 css 是从 fireship 的视频中复制和粘贴的。这是css代码（父类）：

.parent {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

标签： javascriptcssreactjs