WeniVooks

grid

1. 2차원 레이아웃 grid

flex가 1차원 레이아웃을 담당했다면 2차원 레이아웃은 grid가 담당합니다. 행과 열을 동시에 제어할 수 있어 복잡한 레이아웃을 쉽게 만들 수 있습니다. 그리드를 구성하는 기본적인 용어를 알아보겠습니다. 2차원이라 조금 복잡해보이지만 뒤에 나오는 실습을 통해 쉽게 이해할 수 있습니다.

• 그리드 컨테이너 : 그리드의 가장 바깥 영역

• 그리드 셀 : 그리드의 한 칸 (개념적인 정의)

• 그리드 아이템 : 그리드 컨테이너의 자식 요소들

• 그리드 트랙 : 그리드의 행(row) 또는 열(column)

• 그리드 라인 : 그리드 셀을 구분하는 선

• 그리드 넘버 : 그리드 라인의 각 번호

• 그리드 갭 : 그리드 셀 사이의 간격(gutter)

• 그리드 에어리어 : 그리드 셀의 집합

1.1 grid를 적용하는 방법

grid 레이아웃을 시작하는 기본 속성입니다. 부모 요소에 display: grid를 설정하면 자식 요소들이 grid item이 되어 grid 레이아웃을 사용할 수 있습니다. 부모 요소를 grid-container 자식 요소를 grid-item 이라고 부릅니다. 이를 통해 자식들을 배치하고 정렬할 수 있습니다.

.container {
  display: grid;
}

.container {
  display: grid;
}

1.2 행 방향과 열 방향 설정

grid-template-columns는 열방향 그리드 트랙의 사이즈를 설정하고 grid-template-rows 행방향 그리드 트랙의 사이즈를 설정합니다. 픽셀, 백분율, fr 단위를 사용할 수 있습니다. fr은 분수(fraction)의 의미로 컨테이너를 분할해줍니다. 아래 예제를 통해 다양하게 실습해보세요.

이렇게 생성된 grid는 아래와 같이 개발자도구에서 확인할 수 있습니다. 다른 서비스에서 grid가 어떻게 사용되는지 확인해보세요.

.container {
  grid-template-columns: 1fr 2fr 1fr;
}

.container {
  grid-template-columns: 1fr 2fr 1fr;
}

1.3 함수

1.3.1 repeat()

row 혹은 column 방향으로 grid-track 의 사이즈를 좀 더 간단한 형태로 표현하도록 도와주는 CSS 함수입니다. 함수에 전달하는 첫번째 인자는 반복 횟수(repeat count), 두번째 인자는 반복할 값입니다.

아래와 같이 반복되는 구조도 만들 수 있습니다.

/* grid-template-columns: 1fr 2fr 1fr 2fr; */
grid-template-columns: repeat(2, 1fr 2fr);

/* grid-template-columns: 1fr 2fr 1fr 2fr; */
grid-template-columns: repeat(2, 1fr 2fr);

1.4 gap

셀과 셀사이의 간격을 설정할 때 사용 할 수 있는 속성입니다. 복잡한 레이아웃 안에서 마진 대신 편리하게 간격을 설정할 수 있습니다. grid-gap은 gap으로 사용할 수 있습니다. 이 속성은 flex와 동일한 속성입니다.

.container {
  gap: 10px; /* 모든 간격 */
  gap: 10px 20px; /* 행 간격 열 간격 */
}

.container {
  gap: 10px; /* 모든 간격 */
  gap: 10px 20px; /* 행 간격 열 간격 */
}

수평과 수직 정렬

justify-items와 align-items 속성을 사용하여 수평과 수직 정렬을 설정할 수 있습니다.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

2. 강력한 영역 지정

그리드 레이아웃은 강력한 영역 지정을 제공합니다. grid-area 속성을 사용하여 영역을 지정할 수 있습니다. grid-area 속성은 grid-row-start, grid-column-start, grid-row-end, grid-column-end 속성을 한번에 설정할 수 있습니다.

grid-row-start: 1; /* 1, 시작 행 */
grid-row-end: 2; /* 3, 끝 행 */
grid-column-start: 1; /* 2, 시작 열 */
grid-column-end: 4; /* 4, 끝 열 */
 
grid-row: 1 / 2; /* 시작 라인 / 끝 라인 */
grid-column: 1 / 4; /* 시작 라인 / 끝 라인 */
 
/* row-start / column-start / row-end / column-end */
grid-area: 1 / 1 / 2 / 4;
 
/* row-start / column-start / row-span / column-span(여러행 차지) */
grid-area: 1 / 1 / 1 / span 3;

grid-row-start: 1; /* 1, 시작 행 */
grid-row-end: 2; /* 3, 끝 행 */
grid-column-start: 1; /* 2, 시작 열 */
grid-column-end: 4; /* 4, 끝 열 */
 
grid-row: 1 / 2; /* 시작 라인 / 끝 라인 */
grid-column: 1 / 4; /* 시작 라인 / 끝 라인 */
 
/* row-start / column-start / row-end / column-end */
grid-area: 1 / 1 / 2 / 4;
 
/* row-start / column-start / row-span / column-span(여러행 차지) */
grid-area: 1 / 1 / 1 / span 3;

아래 예제를 통해 grid-area 속성을 사용해보세요.

이 밖에도 그리드 이름을 지정하여 설정하는 방법도 있지만 우리 수업에서는 다루지 않습니다.

참고링크