Grid

1. Grid 구조

: 그리드 컨테이너 (부모) + 그리드 아이템 (자식)

 

2. Grid Container (부모)

//그리드 컨테이너(부모) 영역
.container{

//1.그리드 형태
//grid-template-rows:    //행
//grid-template-columns: //열

// fr: fraction (여기로): 숫자비율대로 트랙크기 
// 1fr 1fr 1fr
grid-template-rows: repeat(3, 1fr); 
    
//auto-fill:크기 지정 안하고 최대한 셀 채움 
//minmax(최소,최대)    
grid-template-columns:repeat(auto-fill, minmax(100px, auto));

//auto-fit : auto-fill과 유사한데 fit하게 채움
//크기 20%로 1개의 row에 fit하게 (4칸) / auto-fill (마지막에 5칸중에서 4칸채우기+1칸 공란)
grid-template-columns:repeat(auto-fit, minmax(20%, auto));



//2.간격 만들기
//row-gap + column-gap = gap
gap: 10px 20px ; //row간격, column 간격

//grid-auto-rows (row 개수 모를때 유동적으로 사용)
grid-auto-rows : minmax(100px, auto);

}

 

3. GridItem (자식)

grid-column = grid-column-start + grid-column-end

grid-column-start

(1) (단독 사용시) 그리드 왼쪽에서 x번째 열 항목

(2) (grid-column-end와 같이 사용시) 그리드 왼쪽에서~ end까지 열 항목

(3) grid-column-start > grid-column- end  :가능

#water{
 grid-column-start : 5;
 grid-column-end: 2;
}

(4) 그리드 왼쪽 기준이 기본인데, 오른쪽 기준은 grid-column-start & grid-column- end : 음수설정

-예시로, grid-column-end:-1 : 오른쪽 첫번째 세로