grid css

flexible box는 1차원 레이아웃 제공 (  행 또는 열 하니씩)

grid는 2차원 (행과 열)의 레이아웃 시스템 제공 ( 행과 열 같이 ) 

 

 

1)

gap : column gap, row gap 합친것

 

사용법 ) 

gap: 25px;

 

 

1)

grid-template-columns

grid-template-rows 

: 공백으로 구분된 값 목록으로 그리드의 열과 행 정의 

 

사용법 ) 

 

1) 

grid-template-coumns : repeat(5,1fr) ;

//5번 반복 1fraction만큼 ( 사용가능 공간에 대한 비율)

 

2)

grid-template-columns: 40px 50px auto 50px 40px;

 

3)

width : 800px

grid-template-columns: 300px 10% 1fr 1fr;