일반적으로 디자인은 규칙을 정의하는 과정이지만, 이처럼 불규칙적인 레이아웃을 웹 디자인으로 구현해야 하는 상황이 주어집니다. 불규칙한 비 정형 그리드를 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) 값을 사용합니다.
.home-section {display:grid;grid-template-columns:2fr 6fr 9fr 6fr 2fr 4fr 4fr 11fr 4fr;grid-template-rows:157px auto 57px auto 73px 170px auto;}
아이템 배치
그리드 행/열을 정의하는 과정을 통해 반응하는 그리드 레이아웃이 만들어졌습니다. 이어서 자식 요소인 각 그리드 아이템 요소들을 적절한 위치에 배치해야 합니다. 디자인 요소(이미지 또는 텍스트)의 위치를 확인한 후, 다음 속성을 사용하여 배치를 설정합니다.
grid-column-start
grid-column-end
grid-row-start
grid-column-end
또는 속기형 속성을 사용할 수도 있습니다.
grid-column
grid-row
왼쪽 상단의 1번째 디자인 요소를 봅시다. 아래 그림과 같이 1열 ~ 5열, 2행에서 시작합니다.
그리드를 머리 속으로만 그려서 위치를 배치하는 것은 쉽지 않습니다. 그렇기에 Chrome 또는 Firefox 브라우저의 개발도구를 사용해 시각적으로 그리드를 확인하며 작업해야 손쉽게 배치를 할 수 있습니다.
반응형 뷰
작성된 Grid 코드는 태블릿/데스크탑에 적합한 코드로 모바일에서는 디자인 요소의 너비가 전체 너비를 사용하는 1컬럼 디자인으로 처리해야 합니다. 즉, 모바일 뷰에서는 Grid 코드를 적용할 필요가 없습니다. 미디어 쿼리를 사용해 모바일이 아닌 뷰에서 Grid를 처리할 수 있도록 Grid 코드를 다음과 같이 갈무리 합니다.
@media (min-width:45em/* 720px */ ) {/* Grid 코드 작성 */}
완성된 결과는 다양한 화면에서 매우 잘 반응하며 동작합니다.
크로스 브라우징 (IE)
IE 10+ 브라우저에서도 레이아웃이 무너지지 않고 올바르게 작동 시키려면 IE에서 적용 가능한 코드(-ms-)가 추가적으로 필요합니다. 다음 코드는 CSS Grid ProjectKit for IE 도구를 사용해 자동으로 생성된 것입니다.
