웹 디자이너는 문서의 흐름과 HTML 마크업 순서를 고려해 디자인 해야 합니다. 부유하는 박스로 레이아웃을 만들고, 벽돌을 쌓듯 페이지를 채웁니다. 반응형 웹 디자인의 세계에서는 이러한 접근 방법이 매우 자연스러운 것처럼 보입니다.
하지만 고정된 판형 크기에 디자이너 자신이 원하는 위치에 텍스트와 이미지를 배치 할 수 있는 인쇄 상의 레이아웃 과는 거리가 있어 보다 실험적이고 시각적으로 대담한 레이아웃을 구현할 수 있습니다. 게다가 CSS Grid를 활용하면 x, y축을 따라 디자인 요소를 배치 할 수 있는 것 외에도, 레이아웃 간격을 메우고 설계를 통해 보다 대담한 처리가 가능합니다.
“We’ve got to start reimagining what good graphic design can be with overlapping things.”
– Jen Simmons
Mozilla의 디자이너이자 개발자인 Jen Simmons는 좋은 디자인에 대해 다음과 같이 말했습니다.
"요소를 겹쳐 봄으로 좋은 그래픽 디자인을 재구성 하기 시작해야 합니다."
그리드 행 템플릿은 고정 또는 자동(auto) 값을 사용하여 구성합니다. 자동 값을 사용하면 콘텐츠에 따라 행 높이가 변경됩니다. 콘텐츠 양에 따라 높이가 늘어나거나, 축소됩니다.
.asymmetrical-grid {
display: grid;
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-rows: 100px auto 15px auto auto;
}
이미지 요소 생성
HTML의 <img> 요소를 사용해 콘텐츠 이미지, 또는 CSS background-image 속성을 사용해 배경 이미지를 사용할 수 있습니다. object-fit 속성을 사용하면 <img> 요소를 박스 비율에 맞춰 핏(fit) 하거나, 채우거나(fill), 덮어쓸(cover) 수 있지만 안타깝게도 IE 브라우저는 해당 속성을 지원하지 않아 사용 할 수 없습니다.
이러한 이유로 이미지 조정에 대한 유연성을 활용하기 위해 배경 이미지를 사용합니다. 배경 이미지로 사용할 <figure> 요소를 HTML 마크업에 추가합니다.
.asymmetrical-grid 그리드 컨테이너 요소 내부에 다음과 같이 텍스트 콘텐츠를 추가하는 코드를 작성합니다.
<blockquote class="strapline">
<p>“Almost immediately, word spread of a Welshman who had built this
incredible sounding sub bass system, and soon enough audiophiles
began searching out these legendary subs that were built like
no other.”</p>
</blockquote>
<div class="cta-wrapper">
<div class="cta">
<h1>Gibraltar</h1>
<p>Introducing 212/SE, our most powerful and agile subwoofer,
designed exclusively for larger systems and rooms to allow
superior state of the art speakers to spring to full voice.</p>
<a class="button" href="">View Product Details →</a>
</div>
</div>
다음 단계로 이미지를 배치 했던 것처럼 텍스트 콘텐츠를 그리드 라인을 기준으로 하여 적정 위치에 배치합니다.
IE를 제외한 모던 브라우저는 @support를 사용할 수 있습니다. 즉, IE 와 다른 브라우저를 구분해 코드를 나눌 수 있습니다. 이 방법을 사용해 float 또는 position 등을 사용해 IE 에서도 레이아웃이 무너지지 않게 만들 수 있습니다.
방법은 다음과 같이 코드를 작성해 IE와 모던 브라우저에 적용되는 코드를 나눕니다.
/* IE 지원 Fallback */
.grid-item.img-1 { float: left; }
/* IE를 제외한 모던 브라우저 적용 */
@support (display: grid) {
.asymmetrical-grid {
display: grid;
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-rows: 100px auto 15px auto auto;
}
}
하지만 이 방법은 IE를 위한 별도의 레이아웃 코드가 필요해 제작자를 피곤하게 합니다. Grid 문법 코드만 사용해 IE 브라우저에서도 레이아웃이 무너지지 않게 하려면 MS 접두사(-ms-) 문법이 추가적으로 필요합니다. 다행히 CSS Grid ProjectKit for IE 도구를 사용하면 IE를 위한 코드를 자동으로 생성해줍니다.
