responsive frame, 반응형 프레임 - Vite + React

개발의 시작점을 Grid 로 초기 설정한 것을 메모합니다.

1. 1200 과 768 에서 변경

2. 

// src/SideMenu.js
export default function SideMenu() {
  return (
    <div className="side-menu-container">
      <p>Side Menu</p>
    </div>
  );
}

// src/RightBanner.js
export default function RightBanner() {
  return (
    <div className="right-banner-container">
      <p>Right Banner</p>
    </div>
  );
}

// src/MainContent.js
export default function MainContent() {
  return (
    <div className="main-content-conatiner">
      <h1>Main Content</h1>
    </div>
  );
}

// src/App.js
import './App.css';
import SideMenu from './SideMenu';
import MainContent from './MainContent';
import RightBanner from './RightBanner';

export default function App() {
  return (
    <div className="container">
      <SideMenu />
      <MainContent />
      <RightBanner />
    </div>
  );
}

/* src/App.css */
.container {
  display: grid;
  grid-template-areas:
    "menu main banner";
  grid-template-columns: 1fr 5fr 2fr;
  height: 100vh;
}

.side-menu-container {
  grid-area: menu;
  background-color: lightgrey;
}

.main-contentcontainer {
  grid-area: main;
  background-color: white;
  padding: 16px;
}

.right-banner-container {
  grid-area: banner;
  background-color: lightgrey;
}

/* Tablet (768px and above) */
@media only screen and (max-width: 1200px) {
  .container {
    grid-template-areas: "menu main";
    grid-template-columns: 1fr 4fr;
  }

  .right-banner-container {
    display: none;
  }
}

/* Mobile (less than 768px) */
@media only screen and (max-width: 768px) {
  .container {
    grid-template-areas: "main";
    grid-template-columns: 1fr;
  }

  .side-menu-container, .right-banner-container {
    display: none;
  }
}