display:grid 간단 사용법과 grid로 반응형 하는 법

오늘은 저번 flex에 이어 grid를 알아보겠습니다.

flex는 1차원(선) 컨텐츠에 적합하고, grid는 2차원(면) 컨텐츠에 적합합니다.
flex와 grid가 무엇이 다르냐 여쭤보시면 직관적인 설명으로는 아래 구조를 보여드릴 수 있을 것 같습니다.

대부분의 사이트는 flex로 구현할 수 있습니다.
그러나 2번째 예시 같은 구조는 반응형까지 고려하였을 때 그리드로 만드는 게 무척 편합니다.
그럼 이어서 알아두면 쓸모 많은 grid에 대해 설명해 드리겠습니다.

아래 설명에서 “중요”라고 적은 속성들만 우선 외워두시거나 메모해 두시면 큰 도움이 될 겁니다.

---

실제 사용 예시

바쁘신 분들은 아래 CodePen 코드만 보셔도 됩니다!
0.25x와 0.5x를 통해 코드창에서 반응형을 체험하실 수 있습니다.

---

Grid 레이아웃 & 반응형 처리

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

 

Grid의 또 다른 반응형 처리

See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.

---

부모 요소(Grid 컨테이너)에서 사용하는 속성

grid-template-rows (중요)

그리드의 행(row) 크기를 정의합니다.

• none (기본값): 행이 정의되지 않음.
• 길이 단위(px, %, em 등), fr 단위, auto, minmax(), repeat() 등을 사용해 각 행의 크기를 지정.
• 예: grid-template-rows: 100px 200px auto;
• grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  위처럼 grid만을 사용해서 반응형을 할 수도 있습니다.
  만약 반응형에서 400px 이하로 줄여야 한다면 코드를 덮어 씌우면 됩니다.

 

grid-template-columns

그리드의 열(column) 크기를 정의합니다.

• none (기본값): 열이 정의되지 않음.
• 길이 단위(px, %, em 등), fr 단위, auto, minmax(), repeat() 등을 사용해 각 열의 크기를 지정.
• 예: grid-template-columns: 1fr 2fr auto;

 

grid-template-areas

그리드 아이템의 이름을 지정하고, 레이아웃 배치를 정의합니다.

• 문자열로 각 셀의 이름을 정의.
• 예: grid-template-areas: "header header" "sidebar main" "footer footer";

 

grid-template

grid-template-rows, grid-template-columns, grid-template-areas를 한 번에 정의하는 단축 속성입니다.

• 예: grid-template: "header header" 50px "sidebar main" auto "footer footer" 30px / 200px 1fr;

 

grid-auto-rows

암시적으로 생성된 행의 크기를 설정합니다.

• auto (기본값): 크기를 자동 설정.
• 길이 단위(px, %, em 등) 또는 minmax().
• 예: grid-auto-rows: 100px;

 

grid-auto-columns

암시적으로 생성된 열의 크기를 설정합니다.

• auto (기본값): 크기를 자동 설정.
• 길이 단위(px, %, em 등) 또는 minmax().
• 예: grid-auto-columns: 50px;

 

grid-auto-flow

자동으로 배치되는 아이템의 흐름 방향을 설정합니다.

• row (기본값): 행(row) 단위로 배치.
• column: 열(column) 단위로 배치.
• row dense: 행 단위로 배치하되 빈 공간을 채움.
• column dense: 열 단위로 배치하되 빈 공간을 채움.

 

gap (중요)

그리드 셀 간의 간격을 설정합니다. (grid-row-gap과 grid-column-gap을 축약)

• 단위(px, %, em 등).
• 예: gap: 20px; 또는 gap: 10px 15px; (행 간격, 열 간격 순서).

 

justify-items (중요)

그리드 셀의 콘텐츠를 수평축(main axis) 방향으로 정렬합니다.

• stretch (기본값): 셀 크기에 맞게 늘림.
• start: 시작 지점 정렬.
• end: 끝 지점 정렬.
• center: 중앙 정렬.

 

align-items (중요)

그리드 셀의 콘텐츠를 수직축(cross axis) 방향으로 정렬합니다.

• stretch (기본값): 셀 크기에 맞게 늘림.
• start: 시작 지점 정렬.
• end: 끝 지점 정렬.
• center: 중앙 정렬.

 

place-items

justify-items와 align-items를 축약해서 설정합니다.

• 예: place-items: center start; (수직: center, 수평: start).

 

justify-content (중요)

그리드 전체를 수평축(main axis) 방향으로 정렬합니다.

• start, end, center, stretch, space-between, space-around, space-evenly.

 

align-content (중요)

그리드 전체를 수직축(cross axis) 방향으로 정렬합니다.

• start, end, center, stretch, space-between, space-around, space-evenly.

 

place-content

justify-content와 align-content를 축약해서 설정합니다.

예: place-content: center stretch;

---

자식 요소(Grid 아이템)에서 사용하는 속성

grid-column-start / grid-column-end

아이템이 시작하고 끝나는 열의 위치를 지정합니다.

• 숫자 (그리드 라인 번호) 또는 span 키워드.
• 예: grid-column-start: 2; 또는 grid-column-end: span 3;

 

grid-row-start / grid-row-end

아이템이 시작하고 끝나는 행의 위치를 지정합니다.

• 숫자 (그리드 라인 번호) 또는 span 키워드.
• 예: grid-row-start: 1; 또는 grid-row-end: span 2;

 

grid-column (중요)

grid-column-start와 grid-column-end를 축약해서 설정합니다.

• 예: grid-column: 2 / span 3;.

 

grid-row (중요)

grid-row-start와 grid-row-end를 축약해서 설정합니다.

• 예: grid-row: 1 / span 2;.

 

justify-self

개별 아이템의 콘텐츠를 수평축(main axis) 방향으로 정렬합니다.

• start, end, center, stretch.

 

align-self

개별 아이템의 콘텐츠를 수직축(cross axis) 방향으로 정렬합니다.

• start, end, center, stretch.

 

place-self

justify-self와 align-self를 축약해서 설정합니다.

• 예: place-self: center start;.