수치 입력
계산 결과
페이지 너비
1280px
간격
0px
컬럼 너비
320px
좌우 마진
0px
그리드 미리보기
알아두기
- 그리드 시스템은 콘텐츠를 일정한 규칙으로 배치하여 가독성과 시각적 통일감을 만드는 레이아웃 기법입니다.
- 12 컬럼 그리드는 웹 디자인의 표준으로 Bootstrap, Tailwind CSS 등 주요 프레임워크가 채택하고 있습니다.
- 거터(Gutter) 너비는 전체 레이아웃 폭의 약 4–6%로 설정하는 것이 균형감 있는 간격으로 권장됩니다.
- 계산된 값을 CSS Grid의
grid-template-columns나 Flexbox에 적용하면 정밀한 레이아웃을 구현할 수 있습니다.