grid area를 사용하여 menu, header, content 영역 분리하기

grid area는 다음 첨부 사진처럼 menu, header, content, footer 등을 나누고 싶은 경우 사용할 수 있습니다.

grid area를 사용하여 영역을 나눔

위처럼 영역을 나누는 것은 css를 사용하여 간단하게 구현이 가능합니다. 다음은 css 코드입니다.

.container {
  display: grid;
  grid-template-columns: 160px 1fr; /* sidemenu 너비와 나머지 공간 */
  grid-template-rows: 80px 1fr; /* header 높이와 나머지 공간 */
  grid-template-areas:
    "header header"
    "sidemenu content";
  height: 100vh;
}

.header {
  grid-area: header;
}

.sidemenu {
  grid-area: sidemenu;
  margin: 0rem 0.5rem 0.5rem 0.5rem;
}

.content {
  grid-area: content;
  margin: 0rem 0.5rem 0.5rem 0.5rem;
}

 

container에 grid 타입을 적용하고 다음 옵션을 설정해 주면 됩니다.

• grid-template-cloumns: 공백으로 구분된 값으로 각 열의 너비를 정의합니다.
• grid-template-rows: 공백으로 구분된 값으로 각 행의 높이를 정의합니다.
• grid-template-areas: grid-area 속성으로 설정된 영역의 이름을 참조하여 레이아웃을 지정합니다.

그 말은 즉 위의 코드로 볼 때 2 * 2 그리드 영역을 지정했기 때문에 아래와 같이 영역이 잡히게 됩니다.

• 첫 번째 열, 첫 번째 행: 높이: 80px, 너비: 160px
• 첫 번째 열, 두 번째 행: 높이: 80px, 너비: 화면 너비 - 160px
• 두 번째 열, 첫 번째 행: 높이: 화면 높이 - 80px, 너비: 160px
• 두 번째 열, 두 번째 행: 높이: 화면 높이 - 80px, 너비: 화면 너비 - 160px

다음은 Header, Menu, Router 컴포넌트를 사용하여 그리드 영역에 지정하는 코드입니다.

import Header from "./component/Header";
import Menu from "./component/Menu";
import styles from "./App.module.css";
import Router from "./component/Router";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className={styles.container}>
        <div className={styles.header}>
          <Header />
        </div>
        <div className={styles.sidemenu}>
          <Menu />
        </div>
        <div className={styles.content}>
          <Router />
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

 

css 코드에서 정의한 코드를 div 태그를 사용하여 구분하고, style을 적용해 주면 됩니다.