[grid] 그리드 레이아웃

📄 그리드(grid) 레이아웃

그리드 레이아웃은 그리드 컨테이너 안의 그리드 아이템을 행과 열을 통해 정렬해 주는 2차원 레이아웃 방식을 뜻합니다.

그리드 레이아웃은 기본적으로 블록라인 컨테이너 입니다.
display: inline-grid;로 인라인 레벨 요소로 만들어 줄 수 있습니다.

• 그리드 컨테이너: 그리드 방식으로 레이아웃을 결정할 요소
• 그리드 아이템: 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소들

📄 grid-template-columns

그리드 컨테이너의 트랙 중 열트랙에 있는 아이템들의 크기를 정해주는 속성입니다.
트랙은 그리드 컨테이너의 행 또는 열을 뜻합니다.

grid-template-columns: 100px 1fr; /*열 크기&개수를 지정한다.*/

fr: 남아있는 공간에서 비율로 나눈다.

📄 grid-template-rows

그리드 컨테이너의 트랙 중 행트랙에 있는 아이템들의 크기를 정해주는 속성입니다.

grid-template-rows: 200px 1fr 1fr; /*행 크기&개수를 지정한다.*/

📄 gap(grid-gap)

gap은 그리드 아이템의 간격 사이사이의 간격을 결정해주는 속성입니다.
아래와 같이 단축속성으로도 작성가능합니다.

gap: 20px 10px; /*행사이의 간격은 20px, 열사이의 간격은 10px*/

📄 트랙 관련 함수

▪ repeat(): 반복되는 값을 자동으로 처리하는 함수

▪ minmax(): 최솟값과 최댓값을 각각 지정할 수 있는 함수

▪ auto-fill & auto-fit: 반응형을 고려해 사용할 수 있는 키워드들(함수x)

• auto-fil: 컨테이너의 여백을 남긴다.
• auto-fit: 컨테이너의 여백을 채워준다.

grid-template-columns: repeat(auto-fit, minmax(100px, auto));
/*컨테이너의 여백없이 그리드 아이템의 크기의 최솟값은 100px, 최댓값은 자동으로 만든다.*/

📄 grid-column & row

그리드 컨테이너의 줄번호를 이용하여 아이템을 배치하고 크기를 지정합니다.

grid-row: 1 / 2; /*1번 아이템이 행의 1~2번까지 크기를 차지한다.*/
grid-column: 1 / 3; /*1번 아이템이 열의 1~3번까지 크기를 차지한다.*/

다른 방식으로도 크기를 지정할 수 있습니다.

grid-row-start: 1; /* 행의 1번줄부터 3번줄까지 크기 차지*/
grid-row-end: 3;
grid-column-start: 2; /* 열의 2번줄부터 4번줄까지 크기 차지*/
grid-column-end: 4;

📄 align & justify

▪ align-items

그리드 아이템들을 수직(열) 정렬합니다.
그리드 컨테이너에 지정합니다.

align-items: stretch; /*기본값: 열의 높이만큼 늘어난다.*/
align-items: start; /*열의 시작부분에 붙는다.*/
align-items: end; /*열의 끝에 붙는다.*/

▪ align-self

각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정합니다.

li:nth-child(2) {
  align-self: start;
} /*2번 아이템에만 start적용*/

▪ justify-items

그리드 아이템들을 수평(행) 정렬합니다. 그리드 컨테이너에 지정합니다.

justify-items: stretch;
justify-items: start; /*행너비의 시작부분에 붙는다.*/
justify-items: end; /*행너비의 끝에 붙는다.*/

▪ justify-self

수평축(행)을 따라 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정합니다.

li:nth-child(3) {
  justify-items: end;
} /*3q번 아이템에만 end적용*/

📄 align-content & justify-content

align-content와 justify-content의 속성들은 진행방향만 다른채
같은 성격을 공유합니다.

▪ align-content

그리드 컨테이너의 열방향의 정렬방식을 지정합니다.

align-content: start; /*기본값*/
align-content: end; /*컨테이너 전체의 공간 밑에 붙는다.*/
align-content: space-around; /*각각의 아이템이 진행방향으로의 여백을 동일하게 가진다.*/
align-content: space-between; /*컨테이너의 위, 아래에 붙인 상태의 여백이 동일하다.*/
align-content: space-evenly; /*모든 여백이 똑같다.*/

▪ justify-content

그리드 컨테이너의 행방향의 정렬방식을 지정합니다.

justify-content: center; /* 행의 가운데에 정렬한다.*/
justify-content: space-between; /*컨테이너의 왼쪽, 오른쪽에 붙인 상태의 여백이 동일하다.*/

출처

• 유노코딩