일반적으로 디자인은 규칙을 정의하는 과정이지만, 이처럼 불규칙적인 레이아웃을 웹 디자인으로 구현해야 하는 상황이 주어집니다. 불규칙한 비 정형 그리드를 CSS Grid로 만드는 첫번째 단계는 행(rows)과 열(columns)의 비율을 측정하여 구현하는 것입니다.
열 너비 계산
디자인 된 레이아웃을 분석해 열 너비를 계산해야 합니다. 유연하게 반응하는 너비 값이 필요하므로 퍼센트(%) 값을 사용할 경우, 약간의 수학 지식이 요구 됩니다. 각 요소의 시작/끝 위치를 컬럼 그리드 라인으로 그린 후, 비율 계산을 수행합니다. 1번째 열의 너비를 계산하는 방법은 다음과 같습니다.
레이아웃 총 너비 = 1290px
열 너비 = 53px
퍼센트 = 53/1290*100 = 4.06504065%
따라서 왼쪽부터 시작하는 1번째 열 폭은 전체 레이아웃 폭 대비 4.186046512%에 해당합니다. 이 방법을 사용해 나머지 8개 열의 폭을 계산할 수 있습니다. 계산된 값은 grid-template-columns 속성의 값으로 설정합니다.
행에 포함된 요소의 높이에 따라 높이를 변경해야 하고, 요소의 시작/끝 위치에 따라 행을 고정 높이로 설정 하거나, 유연하게 반응하는 행 높이를 설정해야 합니다. 행 높이를 설정하는 것은 열 너비를 계산하는 것보다 쉽습니다. 다행히도 CSS Grid는 유연하게 반응하는 높이 값을 설정할 수 있도록 자동으로 처리하는 auto 값을 지원합니다.
디자인 된 레이아웃의 행 높이를 계산하여 고정 또는 유동적으로 변경되는 행 높이를 grid-template-rows 속성 값으로 설정할 수 있습니다.
grid-template-rows:
157px /* 고정 */
auto /* 유동 */
57px
auto
73px
170px
auto;
그리드 정의
그리드를 구성하는 행/열의 계산이 마무리 되었으니 이 값을 토대로 정의 코드를 작성합니다. 열 설정은 퍼센트(%) 또는 분수(fr) 값을 사용, 행 설정은 픽셀(px) 또는 자동(auto) 값을 사용합니다.
그리드를 머리 속으로만 그려서 위치를 배치하는 것은 쉽지 않습니다. 그렇기에 Chrome 또는 Firefox 브라우저의 개발도구를 사용해 시각적으로 그리드를 확인하며 작업해야 손쉽게 배치를 할 수 있습니다.
반응형 뷰
작성된 Grid 코드는 태블릿/데스크탑에 적합한 코드로 모바일에서는 디자인 요소의 너비가 전체 너비를 사용하는 1컬럼 디자인으로 처리해야 합니다. 즉, 모바일 뷰에서는 Grid 코드를 적용할 필요가 없습니다. 미디어 쿼리를 사용해 모바일이 아닌 뷰에서 Grid를 처리할 수 있도록 Grid 코드를 다음과 같이 갈무리 합니다.
