Grid 구조
- Grid는 2차원적인 두 방향(가로-세로) 레이아웃 시스템
- table과 같은 구조로 정리 가능, 레이어처럼 층으로 자리를 잡도록 각 요소의 위치를 지정해 줄 수 있음.
Grid-template-rows, Grid-template-columns
- 행과 열을 배치. 설정하는 갯수마다 행과 열의 cell을 추가한다.
- 단위 fr(fraction) 사용시, 숫자 비율대로 cell의 크기를 나눕니다.(일반단위와 섞어서 사용 가능)
grid-template-columns: 100px 100px 200px 400px;
grid-template-columns: 1fr 3fr 2fr; // 1:3:2의 비율로 cell을 나눈다.
grid-template-columns: 100px 1fr 2fr; // 섞어서 사용가능.- repeat 사용시 앞의 수만큼 설정한 사이즈를 반복한다.
grid-template-columns: repeat(5, 1fr);
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */- minmax 함수 사용시 최소, 최댓값을 지정할 수 있다.
grid-template-rows: repeat(3, minmax(100px, auto));- auto-fill과 auto-fit
Row-gap, Column-gap, Gap
- cell 사이의 간격을 설정한다.
gap: row-gap column-gap;
gap: 20px; //행과 열이 같으면 통일가능Grid-auto-columns, Grid-auto-rows
- cell의 갯수를 모를때 자동 사이즈를 fit하게 맞춘다.
Grid-column, Grid-row
- 그리드 라인을 기준으로 아이템별 행, 열의 사이즈를 정리한다.
option
- grid-column-start
- grid-column-end
- grid-column // end 생략 시 그냥 한 칸.
- grid-row-start
- grid-row-end
- grid-row
grid-column-start: 1;
grid-column-end: 3;
grid-column: 2/4;- span으로 몇개의 cell을 차지할것인지 설정한다.
/* 1번 라인에서 2칸 */
grid-column: 1 / span 2;
/* 1번 라인에서 3칸 */
grid-row: 1 / span 3;Grid-area
- grid-row-start, grid-column-start, grid-row-end, grid-column-end 순으로 한번에 지정가능.
grid-area: 2 / 1 / 2 / 4;align-content, justify-content
- flex와 동일한 option
option
start
center
end
space-between
space-around
space-evenly
참고
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout
https://studiomeal.com/archives/533
https://nykim.work/59?category=692675
