영감을 받은 디자인 결정: Avaunt Magazine

인정하기 싫지만 5~6년 전부터 웹 디자인에 대한 관심이 줄어들기 시작했습니다. 물론 사업을 한다는 것은 계속 일해야 한다는 것을 의미했지만 동기를 유지하고 고객에게 최선의 생각을 제공하는 것은 매일의 고된 일이었습니다.

웹을 보는 것은 내 동기를 향상시키지 못했습니다. 웹 디자인은 정체되었고 예측 가능성은 창의성을 대체했으며 아이디어는 데이터보다 덜 중요해 보였습니다.

내가 웹 작업을 즐겼던 이유는 더 이상 관련이 없어 보였습니다. 디자인은 즐거움을 잃었습니다. 복잡한 빌드 도구와 프로세서 세트는 HTML과 CSS를 작성하는 단순한 즐거움을 대신했습니다.

전설적인 신문이자 잡지 디자이너인 Mark Porter와 작업을 시작했을 때 아트 디렉션과 편집 디자인에 매료되었습니다. 미술 학교에서 공부한 적이 없는 사람으로서 이 디자인 영역에 대한 모든 것이 흥미롭고 새롭습니다. 영향력 있는 아트 디렉터에 대한 책을 모두 읽고 전 세계에서 방문한 곳에서 잡지를 수집하기 시작했습니다.

잡지 디자인에서 영감을 받을수록 웹 디자인에 대한 열정이 더 빨리 회복되었습니다. 나는 왜 많은 웹 디자이너들이 인쇄 디자인이 구식이고 그들의 작업과 관련이 없다고 생각하는지 궁금했습니다. 인쇄 디자인을 특별하게 만드는 요소가 왜 웹으로 옮겨지지 않는지 생각해 보았습니다.

제 목표는 편집 디자인의 영감을 주는 예를 찾고, 그것들을 독특하게 만드는 요소를 연구하고, 웹을 위해 더 매력적이고 매력적이며 상상력이 풍부한 디자인을 만들기 위해 배운 내용을 적용하는 방법을 찾는 것이 되었습니다.

내 책장은 이제 잡지 디자인 영감으로 가득 차 있지만 내 컬렉션은 여전히 ​​성장하고 있습니다. 공간이 협소해서 무엇을 골라야 할지 까다롭습니다. 나는 다양한 제품을 구입하고 같은 제목의 문제를 두 개 이상 수집하는 경우는 드뭅니다.

저는 흥미로운 페이지 레이아웃, 영감을 주는 타이포그래피, 텍스트와 이미지를 결합하는 혁신적인 방법을 찾습니다. 잡지에 재미있는 디자인 요소가 많으면 구매합니다. 그러나 잡지에 영감의 조각이 몇 개만 포함되어 있다면 선반에 다시 놓기 전에 사진을 찍는 것이 좋지 않다는 것을 인정합니다.

나는 가능한 한 정기적으로 새 잡지를 구입하고, 크리스마스 일주일 전에 몇 명의 친구와 런던에서 만났습니다. Magma에서 멈추지 않고 "Smoke"로의 여행은 완료되지 않았으며 몇 개의 새 잡지를 샀습니다. 내가 추가한 영감을 설명한 후 한 친구가 내가 잡지 디자인에 영감을 주는 이유와 잡지가 내 작업에 미치는 영향에 대해 글을 쓰라고 제안했습니다.

그 대화는 영감을 주는 디자인 결정을 내리기 위한 시리즈에 대한 아이디어를 촉발했습니다. 매달 저는 출판물을 선택하고 그 디자인을 독특하게 만드는 요소와 웹에서 더 나은 작업을 수행하는 데 도움이 되는 교훈을 배울 수 있는 방법에 대해 논의할 것입니다.

HTML과 CSS의 열광적인 사용자로서 최신 기술을 사용하여 새로운 아이디어를 구현하는 방법도 설명하겠습니다. CSS 그리드, Flexbox 및 모양.

웹을 위한 디자인에 대한 영감과 동기를 다시 한 번 말씀드리게 되어 기쁩니다. 이 시리즈가 여러분에게도 영감을 줄 수 있기를 바랍니다.

Avaunt Magazine: 특별함을 기록하다

나를 한 번 보면 내가 모험가가 아니라는 것을 알게 될 것입니다. 나는 나 자신을 특별히 교양 있다고 생각하지 않으며 아내는 내 스타일이 부족하다고 말하는 것에 대해 정기적으로 농담을 합니다.

경쟁적이고 다양한 잡지가 많은데 왜 Avaunt 잡지와 "모험", "문화", "스타일"에 대한 기사를 다루게 되었나요?

잡지가 내가 찾는 영감을 제공하는지 결정하는 데 몇 페이지만 넘기면 되는 경우가 많습니다. 흥미진진한 페이지 레이아웃, 영감을 주는 타이포그래피 처리, 이미지와 텍스트의 혁신적인 조합 등 처음 몇 초 동안 눈에 띄는 것이 있어야 더 자세히 볼 수 있습니다.

Avaunt는 이 모든 것을 갖추고 있지만 가장 인상 깊었던 것은 아트 디렉터가 잡지 전체에서 일관된 느낌을 유지하면서 다양한 방식으로 색상, 레이아웃 및 유형을 사용하는 방식이었습니다. Avaunt의 페이지를 관통하는 독특한 디자인 스레드가 있습니다. Avaunt의 디자이너들이 다양한 방식으로 사용하는 검정, 흰색, 빨강의 반복과 마찬가지로 스텐실 셰리프와 기하학적 산세리프 서체의 대담한 사용이 특히 인상적입니다. Avaunt의 많은 창의적인 선택은 이야기만큼 모험적입니다.

많은 잡지가 처음 몇 장의 스프레드를 광택 광고에 할애하고 Avaunt도 마찬가지입니다. 그 광고를 넘기면 Avaunt의 콘텐츠 페이지와 매혹적인 4열 모듈식 그리드를 찾을 수 있습니다.

이 레이아웃은 공간 영역 내에서 콘텐츠의 순서를 유지하지만 각 영역을 다른 크기로 만들어 에너지를 유지합니다. 이 레이아웃은 다양한 종류의 온라인 콘텐츠에 적용할 수 있으며 CSS 그리드를 사용하여 구현하기 쉬워야 합니다. 나는 그것을 시도하고 싶어.

sans-serif 헤드라인, 우선 순위 및 펀치를 포장하는 기타 유형 요소의 경우 Avaunt는 2011년 Matt Willey가 Elephant 매거진을 위해 처음 디자인한 MFred를 사용합니다. Matt는 Avaunt 출시의 아트 디렉팅을 담당하고 스텐실 세리프 서체를 의뢰했습니다. 잡지의 대담한 헤드라인과 독특한 숫자.

Avaunt Stencil은 2014년 런던에 기반을 둔 스튜디오 A2-TYPE에서 디자인했으며 이후 라이선스가 제공되었습니다. 사용할 수 있는 스텐실 글꼴이 많이 있지만 대담함과 우아함을 결합한 글꼴을 찾기가 어려울 수 있습니다. Google 글꼴에서 호스팅되는 스텐실 세리프를 찾고 계십니까? Stardos는 디스플레이 크기 유형에 적합한 선택입니다. 더 독특한 것이 필요하면 URW의 Caslon Stencil을 사용해 보십시오.

Avaunt의 모듈식 그리드 사용은 목차 페이지에서 끝나지 않으며 처음으로 저를 이 잡지로 끌어들인 모스크바의 Polytechnic Museum of Cold War 호기심에 대한 퍼짐의 기초가 되었습니다. 이 스프레드는 3열 모듈식 그리드와 다양한 크기의 공간 구역을 사용합니다.

이 냉전 확산에 대해 내가 매료된 것은 verso 페이지의 모듈이 결합되어 텍스트 콘텐츠에 대한 단일 열을 형성하는 방식입니다. 이 열을 사용하더라도 모듈 그리드의 비율은 여전히 ​​내부 요소의 위치와 크기를 알려줍니다.

Avaunt의 많은 페이지 디자인은 멋진 독서 경험에 전념하는 반면, 다른 많은 페이지는 그리드를 확장하고 기본 타이포그래피 스타일을 다른 방향으로 끌어들입니다. 어두운 배경의 흰색 텍스트, 배경과 혼합하기 위해 개체가 잘리는 밝은 색상의 스프레드. 열 너비를 채우는 거대한 이니셜 캡과 페이지를 지배하는 큰 스텐실 드롭 캡.

Avaunt의 장난기 넘치는 디자인은 흥미를 더하고 페이지 배열은 온라인에서 거의 볼 수 없는 리듬을 만듭니다. 이러한 디자인의 변형은 A2-TYPE이 디자인한 Antwerp를 텍스트를 실행하는 서체로 일관되게 사용하고 잡지 전체에 걸쳐 사용되는 검정, 흰색 및 빨강 색상 테마를 사용하여 함께 유지됩니다.

Avaunt 잡지의 디자인을 공부하는 것은 가르치고 영감을 줄 수 있습니다. 모듈식 그리드가 정적인 느낌 없이 창의적인 방식으로 콘텐츠를 구성하는 데 어떻게 도움이 되는지. (나중에 모듈식 그리드에 대해 자세히 알려 드리겠습니다.)

잘 정의된 스타일 세트가 어떻게 독특하고 다양한 디자인의 기초가 될 수 있는지, 그리고 마지막으로 일련의 페이지에 걸쳐 리듬을 만드는 것이 독자의 참여를 유지하는 데 어떻게 도움이 될 수 있는지.

다음에 가장 가까운 잡지 매장을 지날 때 Avaunt Magazine을 픽업하십시오. 그것은 모험에 관한 것이지만 당신의 디자인이 더 모험적이 되도록 영감을 줄 수도 있습니다.

마른 칼럼에 인사하기

영원처럼 느껴지지만 웹용 그리드 디자인에는 거의 혁신이 없었습니다. 반응형 디자인의 도전이 레이아웃에 대한 창의적인 접근으로 이어지기를 바랐지만 슬프게도 그 반대가 사실인 것 같습니다.

기존의 그리드 디자인 대신 1, 2, 3 또는 4개의 블록 콘텐츠 배열이 표준이 되었습니다. Bootstrap에 포함된 것과 같은 프레임워크 그리드는 이러한 프레임워크를 사용하든 사용하지 않든 많은 디자이너에게 시작점으로 남아 있습니다.

많은 웹이 동일한 그리드를 사용하는 웹 디자이너와 동일하게 보이는 이유가 더 있다는 것은 사실입니다. 결국 수십 년 동안 잡지와 신문에 대한 유사한 관습이 있었지만 어쨌든 잡지는 많은 웹사이트에서와 같이 개성을 잃지 않았습니다.

저는 항상 레이아웃 영감을 찾고 있으며 잡지는 풍부한 소스입니다. Avaunt를 읽으면서 몇 년 전에 접했지만 시도하지 않은 기술이 떠올랐습니다. 이 기술은 기존의 기둥 그리드에 좁은 기둥 하나를 추가합니다. 인쇄 디자인에서 이 좁은 열은 종종 "나쁜 열 또는 측정값"이라고 하며 그리드의 나머지 부분과 일치하지 않는 콘텐츠 블록을 설명합니다. (가족 친화적 인 출판물이므로 "스키니 칼럼"이라고 부를 것입니다.)

이 첫 번째 예에서 이미지를 한 열로 압축하면 시각적 무게가 줄어들고 구성의 균형이 무너집니다. 이미지를 두 개의 표준 열에 채우는 것도 그 섬세한 균형을 깨뜨립니다.

마지막 열을 분할한 다음 너비의 절반을 다른 열에 추가하면 내 이미지를 위한 완벽한 공간이 만들어지고 전체 결과가 더 만족스럽습니다.

디자인 요소의 너비를 알리기 위해 마른 열을 사용할 수 있습니다. 이 Mini Cooper 로고는 내 마른 기둥의 너비와 일치하며 그 크기는 내 구성의 나머지 부분과 균형을 이룹니다.

때로는 콘텐츠가 단일 열에 편안하게 맞지 않을 수 있지만 표준 열과 얇은 열의 너비를 결합하여 텍스트를 실행하기 위한 더 많은 공간과 더 나은 측정값을 만듭니다. 레이아웃 내에서 내 콘텐츠가 필요한 곳이면 어디든지 얇은 열을 배치할 수 있습니다.

빈 스키니 열은 눈이 디자인 주위를 돌아다닐 수 있도록 공백을 추가합니다. 두 개의 표준 기둥 사이에 얇은 기둥을 배치하여 만든 비대칭은 구조화된 레이아웃을 보다 역동적이고 활기찬 느낌으로 만듭니다.

또 다른 빈 마른 기둥은 이 디자인에 넓은 거터를 새기고 실행 중인 텍스트를 단일 기둥으로 제한하여 높이가 이미지의 세로 형식을 반영하도록 합니다. 또한 얇은 기둥을 사용하여 인쇄상의 요소를 흥미로운 디자인 요소로 바꿀 수도 있습니다.

스키니 컬럼으로 개발하기

이와 같은 디자인은 오늘날의 CSS를 사용하여 구현하기가 놀라울 정도로 간단합니다. 네 가지 구조적 요소만 있으면 됩니다. 로고, 헤더, 그림 및 실행 중인 텍스트를 포함하는 기사:

 <body> <img src="logo.svg" alt="Mini Cooper"> <header>…</header> <figure>…</figure> <article>…</article> </body>

첫 번째 미디어 쿼리 내의 body 요소에 CSS Grid를 적용하여 중간 크기 화면을 위한 디자인으로 시작합니다. 이 크기에서는 얇은 열이 필요하지 않으므로 대신 뷰포트 너비를 채우도록 균등하게 확장되는 대칭 3열 그리드를 개발 중입니다.

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

행 번호를 사용하여 그리드 열과 행에 항목을 배치합니다. 속성 선택자와 일치하는 하위 문자열을 사용하여 마른 첫 번째 열과 첫 번째 행에 로고를 배치합니다. 이것은 소스 값의 아무 곳에나 "로고"가 있는 이미지를 대상으로 합니다.

 [src*="logo"] { grid-column: 1; grid-row: 1; }

다음으로 헤드라인과 첫 번째 단락이 포함된 헤더 요소를 두 번째 행에 배치합니다. 1에서 -1까지의 줄 번호를 사용하면 이 헤더가 모든 열에 분산됩니다.

 header { grid-column: 1 / -1; grid-row: 2; }

display:grid; 적용하면 그리드 컨테이너의 모든 직계 자손이 그리드 항목이 되며 영역, 줄 번호 또는 이름을 사용하여 배치할 수 있습니다.

이 디자인에는 큰 Mini 이미지가 있는 그림 요소와 원래 Cooper 모델 디자인에 대한 캡션 텍스트가 포함됩니다. 이 수치는 img와 figcaption 사이의 관계를 설명하기 때문에 중요합니다. 그러나 이 그림이 내 마크업을 더 의미 있게 만드는 반면 CSS 그리드를 사용하여 img 및 figcaption을 배치하는 기능을 잃게 됩니다. 둘 다 내가 그리드를 정의한 본문의 직계 후손이 아니기 때문입니다.

운 좋게도, 신중하게 사용할 때 이 문제를 극복할 수 있는 CSS 속성이 있습니다. 그림의 스타일을 지정할 필요는 없으며 img 및 figcaption의 스타일만 지정하면 됩니다. display:contents; 내 그림에 스타일을 지정하기 위해 DOM에서 효과적으로 제거하므로 자손이 그 자리를 차지합니다.

 figure { display: contents; }

display가 스타일링을 위해 DOM에서 내 그림을 효과적으로 제거하지만 글꼴 크기 및 스타일을 포함하여 상속되는 모든 속성은 여전히 ​​상속된다는 점에 유의할 가치가 있습니다.

 figure img { grid-column: 2/-1; grid-row: 4; } figcaption { grid-column: 1; grid-row: 4; align-self: end; }

내가 좋아하는 CSS 속성 중 하나인 Multi-column Layout을 사용하여 기사를 배치하고 3열에 걸쳐 텍스트의 스타일을 지정합니다.

 article { grid-column: 1 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

이제 더 큰 화면을 위한 얇은 기둥을 포함하는 디자인을 구현할 때입니다. 미디어 쿼리를 사용하여 이러한 새로운 스타일을 분리한 다음 1fr 너비의 마른 열로 시작하는 5열 그리드를 만듭니다.

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr repeat(4, 2fr); } } 

그런 다음 새로운 너비와 일치하도록 열 수를 재설정하는 것을 기억하면서 헤더, img 및 figcaption 및 기사의 위치를 ​​변경하는 값을 추가합니다.

 header { grid-column: 3/-1; grid-row: 1; } figure img { grid-column: 4 / -1; grid-row: 2; } figcaption { grid-column: 2; grid-row: 2; align-self: start; } article { grid-column: 3; grid-row: 2; column-count: 1; }

거의 20년이 지난 후에도 HTML 구조를 변경하지 않고 CSS만 사용하여 디자인이 어떻게 보이는지를 근본적으로 바꾸는 것은 저를 미소 짓게 만듭니다. 그리드를 바꾸지 않고 극적으로 다른 레이아웃을 만들기 위해 구도를 변경할 때도 미소를 짓습니다. 이 대체 디자인의 경우 보다 구조화된 모양을 목표로 합니다.

실행 중인 텍스트의 가독성을 높이기 위해 세 개의 열로 나눕니다. 그런 다음 이 콘텐츠 블록을 다른 텍스트 요소와 분리하기 위해 처음 두 개의 표준 열 사이에 얇은 열을 배치합니다. 내 HTML의 구조를 변경할 필요가 없습니다. 내 스타일시트에서 그리드 값을 약간만 변경하면 됩니다. 이번에는 내 1fr 너비의 마른 열 값이 두 가지 표준 열 너비 사이에 있습니다.

 @media screen and (min-width : 64em) { body { grid-template-columns: 2fr 1fr 2fr 2fr 2fr; } }

두 번째 행에 머리글을 배치하고 바로 아래 행에 기사를 배치합니다.

 header { grid-column: 3 / -1; grid-row: 2; } article { grid-column: 3 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

img와 figcaption 모두 내가 그리드를 정의한 body 요소의 직계 자손이 아니기 때문에 이들을 배치하려면 display:contents; 다시 속성:

 figure { display: contents; } figure img { grid-column: 3/5; grid-row: 1; } figcaption { grid-column: 5/-1; grid-row: 1; align-self: start; }

사용 방법에 따라 디자인에 얇은 기둥을 도입하면 콘텐츠를 더 읽기 쉽게 만들거나 정적 레이아웃을 역동적이고 활기찬 느낌을 주는 레이아웃으로 변환할 수 있습니다.

얇은 기둥은 인쇄에서 기술을 배우고 웹 디자인을 개선하는 데 사용하는 한 가지 예일 뿐입니다. 나는 마른 기둥을 시험해보고 싶었고 실망하지 않았습니다.

디자인에 얇은 기둥을 추가하는 것은 종종 영감을 받은 결정이 될 수 있습니다. 추가 유연성을 제공하고 정적인 레이아웃을 에너지로 가득 찬 레이아웃으로 변환할 수 있습니다.

모듈식 그리드 설계

Avaunt 잡지에는 영감을 주는 레이아웃이 많이 포함되어 있지만 특히 두 페이지에 집중하고 싶습니다. 이 스프레드는 다양한 콘텐츠 유형에 적용될 수 있는 디자인 내에 'Cold War Design' 개체를 포함합니다.

언뜻 보기에 모듈식 그리드는 복잡해 보이지만 작업하기 쉽습니다. 웹 디자이너가 거의 사용하지 않는다는 사실에 놀랐습니다. 나는 그것을 바꾸고 싶다.

모듈식 그리드를 신중하게 사용하면 디자인을 에너지로 채울 수 있습니다. 많은 양의 다양한 콘텐츠에 질서를 부여하는 데 탁월하지만 콘텐츠가 거의 없을 때 시각적으로 매력적인 레이아웃을 만들 수도 있습니다.

Avaunt에서 영감을 받은 이 디자인을 위해 저는 6개의 대칭 열과 4개의 균일한 간격의 행을 기반으로 모듈식 그리드를 만듭니다. 그리드 모듈은 내 콘텐츠의 위치와 크기를 정의합니다.

저는 여러 모듈을 함께 묶어 큰 이미지를 위한 공간 영역을 만들고 왼쪽의 단일 열에 텍스트를 실행합니다. 경계선은 페이지의 시각적 구조를 강조하는 데 도움이 됩니다.

이러한 유형의 레이아웃은 처음에는 복잡해 보일 수 있지만 실제로 구현하는 것은 매우 간단합니다. 내 마크업을 시각적 레이아웃을 기반으로 하는 대신 가장 적절한 요소를 사용하여 콘텐츠를 설명하는 것부터 시작합니다. 과거에는 테이블 요소를 사용하여 모듈식 그리드를 구현했습니다. 몇 년 후 부서가 테이블 셀을 대체했습니다. 놀랍게도 이제 이 디자인을 수행하려면 두 개의 구조적 HTML 요소만 있으면 됩니다. 하나의 기사 다음에 정렬된 목록:

 <body> <article>…</article> <ol>…</ol> </body>

이 기사에는 표 형식 정보에 대한 표제, 단락 및 표가 포함되어 있습니다.

 <article> <p class="standfirst">…</p> <h1>…</h1> <p>…</p> <table>…</table> </article>

Mini Blueprint의 모듈식 그리드는 내 디자인에서 가장 복잡한 시각적 측면이지만 이를 설명하는 마크업은 간단합니다. 청사진은 날짜 순서로 되어 있으므로 정렬된 목록은 가장 적절한 HTML 요소로 보입니다.

 <ol class="items"> <li> <h2>1969</h2> <img src="front.svg" alt=""> </li> <li> <h2>1969</h2> <img src="back.svg" alt=""> </li> </ol>

내 HTML의 무게는 2Kb에 불과하고 60줄 미만입니다. 마크업을 초기에 검증하는 데 약간의 시간을 들이면 나중에 CSS를 디버깅하는 데 더 많은 시간을 절약할 수 있으므로 검증하는 것이 좋습니다. 또한 항상 스타일시트 없이 내 콘텐츠에 액세스할 수 있도록 해야 하므로 브라우저에서 스타일이 지정되지 않은 페이지를 엽니다.

미디어 쿼리를 사용하여 그리드 스타일을 분리하여 중간 크기 화면을 위한 대칭 3열 레이아웃 개발을 시작합니다.

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

기사와 정렬된 목록은 본문의 유일한 직계 후손이지만 그리드 항목으로 배치하고 싶은 내용입니다. 나는 display:contents; 내 그리드의 아무 곳에나 콘텐츠를 배치할 수 있습니다.

 article, ol { display: contents; }

내 기사의 모든 요소는 세 열에 걸쳐 있어야 하므로 첫 번째 줄(1)에서 시작하여 마지막 줄(-1)로 끝나는 줄 번호를 사용하여 배치합니다.

 .standfirst, section, table { grid-column: 1 / -1; }

내 주문 목록의 항목은 3열 그리드 그리드에 고르게 배치됩니다. 그러나 내 디자인에서는 일부 항목이 두 개의 열에 걸쳐 있고 하나는 두 개의 행에 걸쳐 있어야 합니다. nth-of-type 선택기는 내 마크업에 클래스를 추가하지 않고도 요소를 대상으로 지정하기 위한 완벽한 도구입니다. 나는 그것들을 사용하고, span 키워드와 항목을 확장할 열 또는 행의 수량을 사용합니다.

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(6), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-row: span 2; } 

브라우저에서 내 디자인을 미리 보면 일부 그리드 모듈이 비어 있기 때문에 계획대로 정확하게 나타나지 않는다는 것을 알 수 있습니다. 기본적으로 모든 문서의 일반적인 흐름은 서양 언어와 마찬가지로 요소를 왼쪽에서 오른쪽으로, 위에서 아래로 정렬합니다. 요소가 그리드에서 사용 가능한 공간에 맞지 않으면 CSS 그리드 배치 알고리즘은 공백을 비워두고 다음 줄에 요소를 배치합니다.

grid-auto-flow 속성과 밀도 값을 내 grid-container(이 경우 본문)에 적용하여 알고리즘의 기본값을 재정의할 수 있습니다.

 body { grid-auto-flow: dense; }

행은 기본 그리드 자동 흐름 값이지만 열, 열 밀도 및 행 밀도를 선택할 수도 있습니다. 브라우저가 빈 모듈을 해당 공간에 들어갈 수 있는 문서 흐름의 다음 요소로 채우기 때문에 grid-auto-flow를 현명하게 사용하십시오. 이 동작은 접근성에 영향을 미칠 수 있는 소스를 변경하지 않고 시각적 순서를 변경합니다.

내 중간 크기 디자인은 이제 계획했던 것과 같으므로 이제 더 큰 화면에 맞게 조정할 때입니다. 먼저 내 기사를 내 레이아웃의 전체 높이에 걸쳐 있는 사이드바로 전환한 다음 특정 목록 항목을 더 큰 6열 그리드의 모듈에 배치하려면 그리드 스타일을 약간만 변경하면 됩니다.

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } article { grid-column: 1; grid-row: 1 / -1; } li:nth-of-type(4) { grid-column: 5 / span 2; } li:nth-of-type(5) { grid-column: 2 / span 2; } li:nth-of-type(6) { grid-column: 4 / span 2; grid-row: 2 / span 2; } li:nth-of-type(14) { grid-column: 5 / 7; } }

그리드 배치 선을 추적하는 것이 때때로 어려울 수 있지만 다행스럽게도 CSS Grid는 모듈식 그리드 설계를 수행하는 한 가지 이상의 방법을 제공합니다. grid-template-areas를 사용하는 것은 대안적인 접근 방식이며 충분한 관심을 받지 못한다고 생각합니다.

grid-template-area를 사용하여 먼저 이름을 지정하여 각 모듈을 정의한 다음 요소를 하나의 모듈이나 공간 영역으로 알려진 여러 인접 모듈에 배치합니다. 이 프로세스가 복잡하게 들릴 수 있지만 실제로 CSS 그리드를 사용하는 가장 쉽고 확실한 방법 중 하나입니다.

로고와 기사로 시작하여 각 요소에 그리드 영역 값을 지정하여 그리드에 배치합니다.

 [src*="logo"] { grid-area: logo; } article { grid-area: article; }

다음으로 각 목록 항목에 그리드 영역을 할당합니다. 나는 단순한 i+n 값을 선택했지만 단어나 b, c 또는 d와 같은 문자를 포함한 모든 값을 선택할 수 있습니다.

 li:nth-of-type(1) { grid-area: i1; } … li:nth-of-type(14) { grid-area: i14; }

내 그리드에는 6개의 명시적 열과 4개의 암시적 행이 있으며, 그 높이는 내부 콘텐츠의 높이로 정의됩니다. grid-template-areas 속성을 사용하여 CSS에서 그리드를 그립니다. 여기서 각 마침표(.)는 그리드 모듈을 나타냅니다.

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: ". . . . ". . . . ".. .. ".. .. . ." . ." . ." . ."; }

그런 다음 앞서 정의한 그리드 영역 값을 사용하여 해당 그리드에 요소를 배치합니다. 열이나 행에 걸쳐 인접한 여러 모듈에서 값을 반복하면 해당 요소가 확장되어 공간 영역을 만듭니다. 마침표(.)를 남기면 빈 모듈이 생성됩니다.

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: "article logo i1 i2 i3 i3" "article i4 i4 i5 i5 "article i7 i8 i5 i5 "article i10 i11 i12 i14 i14"; }

지금까지의 모든 예에서 미디어 쿼리 중단점을 사용하여 다양한 화면 크기에 대한 레이아웃 스타일을 분리했습니다. 이 기술은 반응형 웹 디자인의 복잡성을 처리하는 표준 방법이 되었습니다. 그러나 미디어 쿼리를 사용하지 않고 반응형 모듈식 그리드를 개발하는 기술이 있습니다. 이 기술은 콘텐츠를 리플로우하는 브라우저의 기능을 활용합니다.

더 진행하기 전에 내 디자인에는 두 개의 구조적 HTML 요소만 필요하다는 것을 기억할 가치가 있습니다. 콘텐츠에 대한 하나의 정렬된 목록과 두 요소가 나란히 서기에 충분한 너비가 있을 때 사이드바로 변환하는 기사입니다. 너비가 충분하지 않으면 해당 요소가 콘텐츠 순서대로 세로로 쌓입니다.

 <body> <article>…</article> <ol>…</ol> </body>

정렬된 목록은 내 디자인에서 가장 중요한 부분을 형성하며 항상 뷰포트 너비의 최소 60%를 차지해야 합니다. 이를 보장하기 위해 min-width 선언을 사용합니다.

 ol { min-width: 60%; }

일반적으로 전체 페이지 레이아웃에는 CSS Grid를 사용하고 유연한 구성 요소에는 Flexbox를 사용하는 것이 좋습니다.

body 요소를 flex-container로 만든 다음 flex-grow 속성을 값 1로 사용하여 모든 수평 공간을 채우도록 내 기사가 커지는지 확인합니다.

 body { display: flex; } article { flex-grow: 1; }

두 요소가 나란히 서 있을 때마다 내 주문 목록이 사용 가능한 모든 공간을 차지하도록 하기 위해 엄청나게 높은 flex-grow 값을 999로 지정했습니다.

 article { flex-grow: 999; }

플렉스 기반을 사용하면 기사에 대한 이상적인 시작 너비를 제공합니다. 플렉스 컨테이너의 래핑을 래핑으로 설정하여 목록의 최소 너비에 도달했을 때 두 요소가 스택되고 나란히 설 수 있는 공간이 충분하지 않도록 합니다.

 body { flex-wrap: wrap; } article { flex-basis: 20rem; }

모듈의 수에 제한이 없는 유연한 모듈식 그리드를 만들고 싶습니다. 열이나 행의 수를 지정하는 대신 repeat를 사용하면 브라우저에서 필요한 만큼의 모듈을 만들 수 있습니다. autofill은 사용 가능한 모든 공간을 채우고 필요한 경우 내용을 래핑합니다. minmax는 각 모듈에 최소 및 최대 너비를 제공합니다(이 경우 10rem 및 1fr).

 ol { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-column-gap: 2vw; }

모듈이 비어 있는 것을 방지하기 위해 나는 밀도 값으로 grid-auto-flow를 다시 사용합니다. 브라우저의 알고리즘은 내 콘텐츠를 리플로우하여 빈 모듈을 채웁니다.

 ol { grid-auto-flow: dense; }

이전과 마찬가지로 일부 목록 항목은 두 개의 열에 걸쳐 있고 하나는 두 개의 행에 걸쳐 있습니다. 다시 말하지만, 특정 목록 항목을 대상으로 하기 위해 n번째 유형 선택기를 사용한 다음, span 키워드가 있는 grid-column 또는 grid-row 다음에 확장하려는 열 또는 행 수를 사용합니다.

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-column: span 2; grid-row: span 2; }

이 간단한 CSS는 여러 미디어 쿼리나 별도의 스타일 세트가 필요 없이 환경에 적응하는 반응형 디자인을 만듭니다.

Grid 및 Flexbox를 포함한 최신 CSS를 사용하고 콘텐츠를 리플로우하는 브라우저의 기능과 최소 및 최대 크기에 대한 몇 가지 현명한 선택을 통해 이 접근 방식은 진정한 반응형 웹의 목표를 달성하는 데 가장 근접합니다.

시리즈에서 더 읽어보기

1. 영감을 받은 디자인 결정: Avaunt Magazine
2. 영감을 받은 디자인 결정: 시급한 사항
3. 영감을 받은 디자인 결정: 어니스트 저널
4. 영감을 받은 디자인 결정: Alexey Brodovitch
5. 영감을 받은 디자인 결정: Bea Feitler
6. 영감을 받은 디자인 결정: Neville Brody
7. 영감을 받은 디자인 결정: Otto Storch
8. 영감을 받은 디자인 결정: Herb Lubalin
9. 영감을 받은 디자인 결정: Max Huber
10. 영감을 받은 디자인 결정: Giovanni Pintori
11. 영감을 받은 디자인 결정: Emmett McBain
12. 영감을 받은 디자인 결정: Bradbury Thompson

주의: Smashing 회원Smashing 회원은 Andy의 Inspired Design Decisions 잡지의 아름답게 디자인된 PDF와 이 기사의 전체 코드 예제에 액세스할 수 있습니다. Andy의 웹사이트에서 직접 이 호의 PDF와 예제 및 기타 모든 호를 구입할 수 있습니다.