[CSS] Grid property 정리

/*

CSS Grid를 배우는 이유 : element를 Flex를 활용하여 좌우배치, 중앙배치는 용이하지만 grid형태로구현하는 것은 어려움이 있기 때문

grid-template-columns : 한 열의 너비를 결정하는 property

grid-template-row : 한 행의 높이를 결정하는 property

gap (gap-row, gap-column) : grid의 행 또는 열의 간격을 결정하는 property

grid-template-areas : header, content, nav, footer 4가지 영역으로 위치를 할당해줌 (tiles와 유사)

repeat : 반복함수

grid-column-start, grid-column-end, grid-row-start, grid-row-end  를 활용하면 grid-template-areas를 대체할 수 있다.

범위지정 방법 예시 : 
1. 1 / -1(-1 은 방향 끝을 의미함.)
2. span, 1 / span (지정할 cell의 갯수)

grid-column: start / end;

grid-row: start / end;

line에도 naming을 해줄 수 있다.

본인이 사용하기 편한 기법을 쓰면 됨.

fraction : 비율 처리(핵심) 기본적으로 가능한 공간만큼 차지한다.

row에서 높이로 fr을 할 경우 height를 설정해줘야 한다.

*/

grid-template : 

"header header header header" 1fr

"content content content nav" 2fr

"footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;

// grid-template에서 repeat은 사용할 수 없다.

place-items : 수직 수평; // 각 사각형 하나하나에 어떤 걸 적용하는지

place-content : 수직 수평; // 모든 사각형 다같이 함께 적용

place-self : 수직 수평; //자식요소에 적용)

grid-auto-flow : 방향; // 기본값 : row, filex-direction과 유사, grid로 설정된 cell의 갯수보다 element들이 많을 때 설정된 방향으로 나머지 grid를 표현한다.

grid-auto-columns: 크기; // grid-auto-flow : column; 일 때 작동한다. 

repeat(auto-fit, 최대값); // auto-fit : 남는 공간을 빈 cell로 채움

repeat(auto-fill, 최대값);minmax(최소값, 최대값); // auto-fill : 남는 공간에 맞춰 element를 stretch함

repeat(5, minmax(min-content, 최대값)); 

/*

minmax : element를 얼마나 작게 혹은 크게 만들지 지정함.

min-content : element의 행(또는 열)의 길이를 content가 작아질 수 있는 만큼 작아짐

max-content : element의 행(또는 열)의 길이를 content가 필요한 만큼 크게 만듬

*/