Grid로 레이아웃 연습해보기

Grid로 레이아웃 연습해보기 기본 예제 grid-template-areas 값에 . (마침표) 가 들어가면 그 부분은 빈 공간이 된다. .item 에 width 나 height 속성을 주면 grid-areas 가 무시된다. 반드시 크기는 grid-template 를 통해서 크기를 설정한다. * 위의 코드를 grid-template 속성 하나도 단축 할 수 있다. .wrap{ display:grid; grid-template: "header header header" 100px /* areas 옆에 grid-template-rows*/ "main . ." 100px "main . aside" 100px "footer footer footer" 100px / 1fr 1fr 1fr; /*1fr 1fr 1fr..