column, row
column: 가로
row: 세로
grid-template-columns
컬럼의 갯수와 가로 크기를 지정할수있음
grid-template-columns: 150px 150px 150px
컬럼 3개 각 셀의 가로 크기는 150px
grid-template-rows
행 갯수 지정 및 세로 크기를 지정할수있음
grid-template-rows: 150px 150px 150px
행 3개 각 행의 세로 크기는 150px
repeat
grid-template-rows: repeat(10, 150px)
grid-template-columns: repeat(10, 150px)특정갯수의 column, row를 지정해서 그만큼 만들수있음
grid-auto-rows
행의 크기를 예상할수없을경우 보통 사용
grid-auto-rows: 150px
행이 추가될때마다 그 행의 높이는 150px
minmax
각 셀의 최초, 최대 크기를 지정할수있음
grid-template-colums: repeat(5, minmax(150px, 300px))
grid-auto-rows: minmax(150px, 300px)최소 150px 셀 안의 데이터가 많을 경우 최대 300px까지 늘어남
grid-column-start, end,
grid-row-start, end
start로 몇번째 라인부터 시작할지
end로 몇번째 라인까지 지정할수있음
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;2번째 컬럼라인부터 4번째까지 지정
2번째 행라인부터 4번째 행라인까지 지정
grid-column: 2 / 4;
grid-row: 2 / 4;위와 같이 표현할수도 있음
grid-column: 2 / span 2;
grid-row: 2 / span 2;위와 같이 span을 이용하여 표현도 가능
span: 칸수
2 / span 2 : 2번째 라인부터 2칸을 지정하겠다
음수
기본 행, 컬럼라인은 1부터 시작하지만
반대에서부터 시작하려면 -1부터 시작하면됨
1부터 시작해서 4가 마지막이라면
4 === -1
3 === -2
1 === -4grid-gap
gap과 동일하게 컴포넌트 사이의 간격을 조정할수있다
grid-column-gap,grid-row-gap 으로 컬럼, 행 사이의 간격 조정 가능
grid-template-areas
grid-template-areas:
'a a a'
'b b c'
'd d c'위와 같이 사용 시 'a', 'b', 'c', 'd'의 값을
grid-area에 사용 시 해당 값들끼리 셀이 합쳐진다
grid-area
grid-area: 'a'
grid-area: 'b'같은 값을 가지는 grid-area 끼리 셀이 합쳐짐
hi