Quiero que mi aplicación sea una aplicación en la que puedas chatear y compartir notas. Así que he creado ambas cosas. Ambos son componentes separados. Entonces, cuando traté de dividir la página por la mitad (una mitad será el componente de chat, la otra será la aplicación de notas) usando la cuadrícula, obtuve resultados extraños.

Así se veía cuando usaba grid, se ve bastante bien, ¿verdad?

Esto es lo que se ve cuando agrego el componente de chat, raro y desalineado

Así que el componente de chat fue copiado de este youtuber llamado Fireship. Tal vez no cambié el código para que se ajustara correctamente a la otra mitad. Pero hice mi mejor esfuerzo usando mi conocimiento de css. Todo esto está en el componente principal, este es el código del componente principal:

 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;

Puede ser por la forma en que he organizado mi código. Pero he probado todas las combinaciones y no parece funcionar. Probablemente sea un problema causado por el css. El resto del css se copia y pega del video de fireship. Aquí está el código css (clase principal):

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