[CSS] [12-5] CSS 그리드 레이아웃 사용하기

*CSS 그리드 레이아웃 : column(세로줄) x row(가로줄)로 구성되어 있음

*CSS 그리드 레이아웃 : 가장 최근에 제안된 그리드 레이아웃 제작 방법

 

[CSS 그리드 레이아웃 항목을 배치하는 속성]

1. display속성 : 그리드 컨테이너를 지정

• grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치
• inline-grid : 컨테이너 안의 항목을 인라인 레벨 요소로 배치

 

2. grid-template-columns & grid-template-rows 속성 : 칼럼과 줄을 지정

fr단위  & repeat( )함수	-fr단위 : 상대비 지정 (ex. 1:1:1 ...) -repeat( )함수 : 값이 반복될 때, 축약해서 표현 가능 예) grid-template-columns: 1fr 1fr 1fr; => grid-template-columns: repeat(3, 1fr);로 축약 가능
minmax( )함수	-최솟값과 최댓값을 지정 (글자내용이 줄 높이보다 많아서 다 표시되지 않을 때 -> minmax( )함수를 써서 줄 높이를 유연하게 지정 가능) 예) grid-template-rows: minmax(100px, auto); => 줄 높이는 최소 100px로 지정한 뒤, 글자가 많아서 다 안담길 경우에는 자동으로 100px보다 커짐
auto-fill & auto-fit	-자동으로 칼럼 개수를 늘이거나 줄여줌 -차이점은 auto-fit은 남는 공간 없이 꽉 채우는 반면, auto-fill은 정해진 최소너비까지만 표시 예) ①grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); =>화면을 꽉 채울 만큼 칼럼 너비를 늘려서 표시 ②grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); =>칼럼 최소 너비(200px)만큼만 딱 채워서 표시. 나머지 빈 공간은 남겨놓음

 

3. grid-column-gap & grid-row-gap & grid-gap 속성 

-그리드 항목 ~ 항목 사이의 간격을 조절

• grid-column-gap : 칼럼~칼럼 사이의 간격을 지정
• grid-row-gap : 줄 ~ 줄 사이의 간격을 지정
• grid-gap : 칼럼과 줄의 간격을 한꺼번에 지정   

       예)grid-gap: 30px 20px;  =>칼럼간격 30, 줄간격 20

       예)grid-gap: 1rem;

 

---

 

[배치하기]

1. 그리드 라인을 사용해서 배치하기

-그리드 라인의 번호(1,2,3,4, ...)를 이용

grid-column-start : 칼럼 시작의 라인 번호를 지정 grid-column-end : 칼럼 마지막 라인 번호를 지정 예) grid-column-start: 1 grid-column-end: 4		grid-row-start : 같은 방법 grid-row-end : 같은 방법 예) grid-row-start: 1 grid-row-end: 4
grid-column : 칼럼 시작 번호 ~ 칼럼 끝 번호 사이에 슬래시(/)를 넣어 사용 예) grid-column: 1/4		grid-row : 같은 방법 예) grid-row: 1/4

 

2.  템플릿 영역을 사용해서 배치하기 (like 레고블럭,,)

①box1~box4까지 grid-area 속성을 사용해서 템플릿 이름을 지정

②그리드 컨테이너로 사용하는 #wrapper 요소에서 grid-template-areas 속성을 사용해서 배치 시작