레이아웃 & 그리드

레이아웃 그리드 Stretch/Center 차이

피그마 오픈카톡방2026. 3. 7.

질문사항

Figma 레이아웃 그리드 설정에서 'Type' 옵션 중 'Stretch'와 'Center'의 차이점이 무엇인가요? 반응형 웹 디자인 작업 시 어떤 경우에 사용해야 하나요?

Figma의 레이아웃 그리드 설정에서 'Type' 옵션은 그리드가 프레임 크기에 어떻게 반응할지 결정합니다. 반응형 웹 디자인 시 매우 중요한 설정입니다.

Stretch (늘리기):

특징: 칼럼(Column)의 너비를 고정하지 않고, 프레임의 크기에 맞춰 칼럼이 자동으로 늘어나거나 줄어듭니다. 거터(Gutter) 값과 마진(Margin) 값은 일정하게 유지됩니다.

용도: 주로 반응형 웹 디자인이나 모바일 앱의 메인 그리드를 설정할 때 사용됩니다. 화면 크기가 변해도 콘텐츠가 화면 너비에 맞춰 유동적으로 확장되거나 축소되어야 할 때 적합합니다.

예시: 전체 화면 너비를 사용하는 히어로 섹션, 유동적인 카드 레이아웃 등.

Center (중앙 정렬):

특징: 칼럼의 너비를 특정 수치로 고정하고, 프레임의 정중앙에 배치합니다. 프레임 크기가 변해도 칼럼의 너비는 유지되며, 좌우 마진만 조절됩니다.

용도: 주로 PC 웹사이트의 컨테이너 영역을 설계할 때 사용됩니다. 모니터가 아무리 커져도 실제 콘텐츠가 보이는 영역은 고정된 너비를 유지해야 하는 경우에 적합합니다.

예시: 웹사이트의 메인 콘텐츠 영역, 최대 너비가 정해진 섹션 등.

요약:

Stretch: 유동적인 너비, 반응형 레이아웃에 적합.

Center: 고정된 너비, 중앙 정렬된 컨테이너 레이아웃에 적합.