[css] CSS Grid layout

CSS Grid layout 선택이유

개인 포트폴리오 홈페이지를 만들기 시작했는데 기존에 웹프로그램만 다뤄보다 모바일 환경에도
보기 적합한 구조를 위해 그리드 레이아웃을 적용하기로 했다.

다단칼럽 사용, 부트스트랩, 플렉스 박스 레이아웃의 선택지가 있었지만 나는 그중에서도
CSS 그리드 레이아웃 모듈을 선택하였다.

플렉스 박스 레이아웃과 CSS 그리드 레이아웃의 차이라고 하면 플렉스 아이템은 1차원, CSS그리드 레이아웃은
2차원이라고 하는데 나는 어차피 배워서 사용할 거 이왕이면 유연한 그리드 사용을 하고싶어
CSS 그리드 레이아웃 방법을 선택하였다.

그리드 용어

• 그리드 컨테이너 : grid를 적용하는 전체영역 (display : grid 또는 inline-grid)를 적용함
• 그리드 아이템 : 컨테이너의 자식요소
• 그리드 트랙 : 그리드의 행과 열을 말함
• 그리드 셀 : grid의 한칸 한칸
• 그리드 라인 : grid를 구분하는 선
• 그리드 번호 : 그리드라인의 각 번호
• 그리드 갭 : 셀사이의 간격
• 그리드 영역 : 그리드 라인으로 둘러싸인 사각형 영역 (셀의 집합)

그리드 속성

• display : 그리드를 만들때 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어 속성을 gird나 inline-grid로 지정한다.

.wrapper{
	display:grid;
}

• grid-template-columns : 그리드 컨테이너 안의 항목을 몇개의 칼럼으로 배치할지, 각 칼럼의 너비는 어떻게 할지 지정하는 속성

ex) 너비 200px 칼럼을 3개 배치할 때

grid-template-columns:200px 200px 200px;

• grid-template-rows / gird-template-columns : 그리드의 행, 열의 크기 지정
  -grid-template-rows : 각 항목의 높이를 지정
  

grid-template-rows:1fr 1fr 1fr;
grid-template-rows:repeat (4, 1fr);
grid-template-rows:300px 1fr;
grid-template-rows:100px 200px auto ;

참고) 지정한 줄의 높이보다 내용이 더 많을 경우 내용이 넘치는데 이것을 방지하기 위해 minmax()를 사용한다

 grid-template-rows:minmax(300px auto);

• fr 단위 : fr(Fraction) 상대적인 길이를 지정할 때 사용(비율대로 트랙의 크기를 나눔)

ex) 2:1:3으로 비율 지정하고 싶을 때

grid-template-columns:2fr 1fr 3fr;

참고) fr 단위를 반복적으로 사용한다면 repeat()을 사용
ex) 1fr씩 3개 반복 한다면

grid-template-columns:repeat(3,1fr);

• auto-fill / auto-fit : 개수를 미리 정하지 않고 설정된 너비안에서 최대한 셀을 채움

grid-template-columns: repeat(auto-fill, minmax(20%, auto));

• row-gap / column-gap / gap : 셀 사이의 간격을 조정

row-gap: 10px;
column-gap: 10px;
gap : 10px 20px; //row-gap:10px; column-gap:20px;
gap: 20px // row-gap:20px; column-gap: 20px;

• grid-auto-columns / grid-auto-rows : 셀의 개수를 미리 알수 없는 경우 트랙의 크기를 지정하는 속성

그리드 라인배치 사용하기

위의 그림에서 파란색 테투리 부분의 그리드 라인을 따라
grid-column-start 번호는 1번, grid-column-end 번호는 3번 축약은 grid-column:1/3 이며
grid-row-start는 1, grid-row-end는 2 축약은 grid-row:1/2이다.

이와 같이 초록색 펜으로 그린 부분은

grid-row-start: 2;
grid-row-end: 4;
grid-row:2/4;

grid-column-start: 3;
grid-column-end: 4;
grid-column:3/4;

으로 지정할 수 있다.