Grid system, 1961 Josef Müller-Brockmann 스위스

한 줄로

페이지를 균등한 격자로 나누어 콘텐츠를 정렬하는 시스템입니다. 1961년 스위스 디자이너의 책이 모든 그래픽 디자인의 교과서가 됐습니다.

어디서 왔나

기원은 Bauhaus (1919~1933)입니다. 모든 디자인이 격자 기반이어야 한다는 모더니즘 원칙입니다. 1950년대 Swiss Style (스위스 디자인)이 이를 본격적으로 정교화했습니다.

1961년, 스위스 디자이너 Josef Müller-Brockmann이 책 Grid Systems in Graphic Design을 출간했습니다. 이 책이 그래픽 디자인의 표준 교재가 됐습니다.

웹으로

2000년대 후반 웹 디자인에 도입됐습니다. 960 Grid System (12 또는 16 컬럼), Bootstrap (12 컬럼)이 표준화했습니다. 모든 반응형 웹 디자인이 grid 기반입니다.

CSS Grid와의 관계

CSS Grid (2017)는 grid system의 직접 후예입니다. 12 컬럼 그리드를 한 줄 CSS로 정의 가능합니다.

grid-template-columns: repeat(12, 1fr);

12 컬럼의 이유

12는 1, 2, 3, 4, 6, 12로 균등 분할 가능합니다. 화면을 1/2, 1/3, 1/4, 1/6 등 다양한 비율로 나누기 좋습니다.

바이브 메이커가 챙길 한 가지

Tailwind의 grid 유틸리티(grid-cols-12 gap-4)가 가장 빠른 도입 방법입니다. 자체적으로 grid를 만들 필요가 없습니다.

관련

CSS Grid · Modular scale · Visual hierarchy