CSS - Grid

 

Grid Container에 적용하는 속성

 

display

• grid: 컨테이너가 block 요소처럼 동작합니다.
• inline-grid: 컨테이너가 inline-block 요소처럼 동작합니다.

 

grid-template-columns & grid-template-rows

• 각각 열(세로줄)과 행(가로줄)의 크기와 개수를 정의
• px, %, em 등 일반적인 단위 사용 가능.
• fr (fractional unit) : 사용 가능한 공간을 비율로 나누어 가진다.
  • grid-template-columns: 1fr 1fr 2fr; → 3개의 열을 1:1:2 비율로 만듭니다.
• repeat(): 반복되는 값을 간결하게 표현합니다.
  • grid-template-columns: repeat(3, 1fr); → 1fr 크기의 열 3개를 만듭니다.
• minmax(): 최소값과 최대값을 지정하여 유연한 크기를 만듭니다.
  • minmax(100px, 1fr) → 최소 100px 너비를 보장하되, 공간이 남으면 1fr 비율로 늘어납니다.
• 주의점/특징: fr 단위는 gap을 제외한 나머지 공간을 기준으로 비율을 계산하므로 매우 직관적.

grid-template-*를 명시하지 않을 시 암시적 규칙에 의해 생성

 

 

grid-auto-columns & grid-auto-rows

• 암시적으로 생성되는 열(column)과 행(row) 트랙의 크기를 제어
• 두 속성 모두 기본값은 auto
• auto의 의미: "선반에 놓일 물건(콘텐츠)의 크기에 딱 맞게 선반 크기를 조절해라"
• 특징: 200px나 1fr 등 명시적인 값을 지정 가능. grid-auto-rows: 150px; 라고 지정하면, 암시적으로 생성되는 모든 행의 높이는 150px

 

grid-auto-flow

• 아이템을 어떤 방향으로 자동 배치할지, 즉 '선반을 가로로 먼저 채울지, 세로로 먼저 채울지' 결정
• row (기본값) ➡️: 아이템을 가로로 차례대로 배치합니다. 한 줄이 꽉 차면 다음 줄로 넘어간다
• column ⬇️: 아이템을 세로로 차례대로 배치합니다. 한 열이 꽉 차면 다음 열로 넘어간다.
• dense: 알고리즘을 최적화하여 그리드에 빈 공간이 생기면, 나중에 나오는 아이템이라도 크기가 맞으면 그 빈 공간을 채워 넣는다. (약간의 순서 변경이 발생할 수 있음)

 

 

grid-template-areas

• 각 영역에 이름을 부여하고, 그 이름을 이용해 아이템을 배치
• 문자열로 각 행의 구성을 정의
  • . 문자는 빈 셀을 의미
  • ex

  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  

• 주의점/특징: 모든 행은 동일한 수의 열을 가져야 한다. 레이아웃 구조를 한눈에 파악할 수 있어 매우 편리.

 

gap (or grid-gap)

• 셀과 셀 사이의 간격(Gutter)을 정의.
• row-gap column-gap 순서로 값을 지정. 하나만 쓰면 행과 열 간격이 동일하게 적용됩니다.
  • gap: 20px 10px; → 행 간격은 20px, 열 간격은 10px.
• 주의점/특징: 과거에는 grid-row-gap, grid-column-gap으로 썼지만, 지금은 gap으로 통일.

 

 

justify-content & align-content

• 컨테이너에 여유 공간이 있을 때, 그리드 전체를 어떻게 정렬할지 결정. Flexbox와 역할이 동일
• justify-content: 행 축(가로) 정렬
• align-content: 열 축(세로) 정렬
• 주의점/특징: 그리드의 크기가 컨테이너보다 작을 때만 효과가 있음

 

justify-items & align-items

• 각 셀 안에서 아이템들을 기본적으로 어떻게 정렬할지 결정.
• justify-items: 셀 안에서의 수평 정렬
• align-items: 셀 안에서의 수직 정렬
• stretch (기본값): 아이템이 셀을 꽉 채우도록 늘어난다.
• start: 셀의 시작점에 맞춰 정렬.
• end: 셀의 끝점에 맞춰 정렬.
• center: 셀의 중앙에 정렬.

 

 

Flex Item에게 적용하는 속성

 

grid-column-start, grid-column-end, grid-row-start, grid-row-end

• 아이템이 몇 번째 그리드 선(Grid Line)에서 시작해서 몇 번째 선에서 끝날지 지정하여 위치와 크기를 결정
• 숫자. 그리드 선은 1부터 시작합니다.
  • grid-column-start: 1; grid-column-end: 3; → 1번 세로선에서 시작해 3번 세로선에서 끝납니다. (2개의 열을 차지)
• 주의점/특징: -1은 마지막 선을 의미하여 매우 유용하게 사용 가능

 

grid-column & grid-row

• start와 end 속성을 /로 구분하여 한 번에 쓰는 단축 속성
  • 예시: grid-column: 1 / 3;
• span 키워드 - 몇 개의 칸을 차지할지 지정 가능
  • grid-column: 1 / span 2; → 1번 선에서 시작해 2개의 칸을 차지합니다.

 

grid-area

• 아이템 배치를 위한 궁극의 단축 속성, 두 가지 방식으로 사용.
  1. grid-row-start / grid-column-start / grid-row-end / grid-column-end 순서로 값을 지정.
  2. 부모의 grid-template-areas에서 정의한 영역 이름을 지정. (가장 직관적)
• 예시: grid-area: main;

 

 

 

justify-self & align-self

• 부모의 justify-items, align-items 설정을 무시하고 특정 아이템 하나만 셀 안에서 개별적으로 정렬. Flexbox의 align-self와 역할이 유사.
  • justify-self: 셀 안에서의 개별 수평 정렬
  • align-self: 셀 안에서의 개별 수직 정렬
• 값: stretch, start, end, center 등.