Grid Line / 모눈종이만들기 / 여백늘리기 / Grid-area / 아이템배치

grid-template-colums: 250px auto auto

grid-template-colums: 250px 1fr 1fr

auto 는 확장성까지 포함한다. (칸이 늘어날수있다)

fr 는 확장하지않는다. 칸을 유지한다.

1fr하는게 안전하다.

ex) grid-column-start : 1, grid-column-end : 4; 경우 컬럼을 3까지만들었어도 1개가 자동으로 더생긴다.

여백에 맞춰서 모눈종이가 채워짐

 

여백늘리기

여백을 확장해서 창크기에 맞게 모눈종이가 적용되게한다.

html,body{ height};

 

margin: 0 ; 마진을없애서 모눈종이와 창사이의 틈을 없앤다.

 

아이템배치 Grid Line 컬럼,로우 번호이용

Grid-area 가로 시작 / 세로 시작 / 가로 끝 / 세로 끝

 

아이템배치 : Grid line 이름