CSS) grid

 

이 사이트에서 왼쪽에 메뉴를 두고 오른쪽에 내용이 나오도록 했다. 그러기 위해서는 grid라는 기능을 이용해서 나눴다.

 

-코드

#gird ol{
  padding-left:52px;
}
#grid{
  display: grid;
  grid-template-columns: 200px 1fr;
}
#grid #article{
  padding: 25px;
}

왼쪽 메뉴를 ol로 구현했고 #grid로 ID로 구현했다. 

-#grid ol에서는 메뉴에서 위치 조절을 해줬다.

-#grid에서는 grid-template-columns는 왼쪽을 200px로 구현하고 1fr는 전체칸을 차지한다. 만약 2fr 1fr으로 했다면 전체를 3fr로 두고 왼쪽이 2fr을 차지하고 오른쪽 1fr을 차지한다.

-#grid #article에서는 오른쪽 메뉴의 패딩을 담당한다. 그래서 위에 제목과 너무 붙어있지 않도록 해준다.