Grid Areas

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 70px min-content;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-gap: 10px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

import React from 'react';
import './styles.css';

interface GridProps {
  children: React.ReactNode;
}

export const Grid = ({ children }: GridProps) => {
  return (
    <div className="container">
      {children}
    </div>
  );
};


export interface HeaderProps {
  children: React.ReactNode;
}


export const Header = ({ children }: HeaderProps) => {
  return (
    <div className="header">
      {children}
    </div>
  );
};


export interface SidebarProps {
  children: React.ReactNode;
}

export const Sidebar = ({ children }: SidebarProps) => {
  return (
    <div className="sidebar">
      {children}
    </div>
  );
};

export interface ContentProps {
  children: React.ReactNode;
}

export const Content = ({ children }: ContentProps) => {
  return (
    <div className="content">
      {children}
    </div>
  );
};

export default function App() {
  return (
    <>
      {/*       React ⚛️ + Vite ⚡ + Replit 🌀 */}
      <Grid>
        <Header>Header content goes here...Header content goes here...Header content goes here...Header content goes here...Header content goes here...Header content goes here...Header content goes here...</Header>
        <Sidebar>Sidebar content goes here...Sidebar content goes here...Sidebar content goes here...Sidebar content goes here...Sidebar content goes here...Sidebar content goes here...</Sidebar>
        <Content>Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...</Content>
      </Grid>
    </>
  )
}

export default App;