css grid 사용방법정리

grid 요소 ?

• grid layout은 요소들이 포함된 큰박스에 grid 를 선언
• 안에 있는 요소들에게 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는것!

See the Pen Untitled by getgrovy (@getgrovy) on CodePen.

 

위와 같이

적용할수있다~

grid 요소 

  grid-template-areas: 
    "header header"
    "nav nav"
    "aside section"
    "footer footer"
    ;
  //구성
  grid-template-columns: 30% 70% ;
  //columns 사이즈 
  grid-template-rows: 50px 50px 78px 50px ;
  // rows 사이즈