CSS 그리드 레이아웃의 모범 사례

사람들이 프로덕션 환경에서 CSS 그리드 레이아웃을 사용하고 있기 때문에 점점 더 일반적인 질문은 "모범 사례는 무엇입니까?"인 것 같습니다. 이 질문에 대한 짧은 대답은 사양에 정의된 레이아웃 방법을 사용하는 것입니다. 사용하기로 선택한 사양의 특정 부분과 실제로 Grid를 Flexbox와 같은 다른 레이아웃 방법과 결합하는 방법은 구축하려는 패턴과 사용자 및 팀이 원하는 작업 방식에 따라 달라집니다.

더 자세히 살펴보면 "모범 사례"에 대한 이 요청은 아마도 이전과 매우 다른 레이아웃 방법을 사용하는 데 자신감이 없다는 것을 나타낼 수 있다고 생각합니다. 아마도 Grid가 설계되지 않은 용도로 Grid를 사용하고 있거나 Grid를 사용해야 할 때 Grid를 사용하지 않는 것에 대한 우려일 수 있습니다. 구형 브라우저 지원에 대한 걱정이나 Grid가 개발 워크플로에 어떻게 들어맞는지에 대한 문제일 수도 있습니다.

이 기사에서는 모범 사례로 설명할 수 있는 몇 가지와 걱정할 필요가 없는 몇 가지 사항을 다루려고 합니다.

설문 조사

이 기사에 대한 정보를 제공하기 위해 다른 사람들이 프로덕션에서 그리드 레이아웃을 어떻게 사용하고 있는지, 그들이 직면한 문제는 무엇이며, 실제로 어떤 점이 즐거웠는지 알고 싶었습니다. 일반적인 질문, 문제 또는 사용 중인 방법이 있었습니까? 알아보기 위해 저는 사람들이 그리드 레이아웃을 어떻게 사용하고 있는지, 특히 가장 좋아하는 것과 어려웠던 점에 대해 질문하는 간단한 설문조사를 준비했습니다.

다음 기사에서 나는 그 답변 중 일부를 참조하고 직접 인용할 것입니다. 또한 설명된 기술에 대해 자세히 알아볼 수 있는 다른 많은 리소스에 링크할 것입니다. 결과적으로 설문 조사 응답에서 풀어야 할 흥미로운 것들의 가치가 있는 기사가 한 개 이상 있었습니다. 앞으로 포스팅할 다른 것들에 대해서 다루도록 하겠습니다.

접근성

그리드 사양에서 사용할 때 주의해야 할 부분이 있는 경우 콘텐츠 재정렬을 유발할 수 있는 항목을 사용할 때입니다.

“저자는 콘텐츠의 논리적인 재정렬이 아니라 시각적인 경우에만 순서와 그리드 배치 속성을 사용해야 합니다. 이러한 기능을 사용하여 논리적 재정렬을 수행하는 스타일 시트는 부적합합니다."

— 그리드 사양: 재정렬 및 ​​접근성

이것은 그리드에만 해당되는 것은 아니지만 2차원에서 콘텐츠를 너무 쉽게 재배열할 수 있는 기능은 그리드에 대해 더 큰 문제가 됩니다. 그러나 Grid, Flexbox 또는 절대 위치 지정과 같이 콘텐츠 재정렬을 허용하는 방법을 사용하는 경우 문서에서 콘텐츠가 구조화된 방식에서 시각적 경험을 분리하지 않도록 주의해야 합니다. 스크린 리더(그리고 키보드만 사용하여 문서를 탐색하는 사람들)는 소스의 항목 순서를 따를 것입니다.

특히 주의해야 할 부분은 Flexbox에서 순서를 반대로 하기 위해 flex-direction 을 사용할 때입니다. Flexbox 또는 Grid의 order 속성 문서의 논리적 순서에서 항목을 이동하는 경우 모든 방법을 사용하여 그리드 항목을 배치합니다. grid-auto-flow 의 조밀한 패킹 모드를 사용합니다.

이 문제에 대한 자세한 내용은 다음 리소스를 참조하세요.

• 그리드 레이아웃 및 접근성 - MDN
• Flexbox와 키보드 탐색 연결 끊김

어떤 그리드 레이아웃 방법을 사용해야 합니까?

"Grid에서 선택의 폭이 너무 넓기 때문에 전체에서 유지 관리할 수 있도록 일관된 작성 방식(예: 그리드 선 이름 지정 여부, 그리드 템플릿 영역 정의, 폴백, 미디어 쿼리 정의)을 유지하는 것이 어려웠습니다. 팀."

— 미셸 바커

Grid를 처음 볼 때 레이아웃을 만드는 다양한 방법으로 인해 압도적으로 보일 수 있습니다. 그러나 궁극적으로 모든 것은 그리드의 한 라인에서 다른 라인으로 배치되는 사물로 귀결됩니다. 달성하려는 레이아웃과 팀 및 구축 중인 사이트에 적합한 항목을 기반으로 선택할 수 있습니다.

옳고 그른 방법은 없습니다. 아래에서 나는 혼란의 일반적인 주제 중 일부를 선택할 것입니다. 나는 또한 이전 기사 "Grid Gotchas and Stumble Blocks"에서 이미 다른 많은 잠재적인 혼란 영역을 다루었습니다.

암시적 또는 명시적 그리드를 사용해야 합니까?

grid-template-columns 및 grid-template-rows 로 정의하는 그리드를 명시적 그리드라고 합니다. Explicit Grid를 사용하면 그리드의 선 이름을 지정할 수 있고 -1 을 사용하여 그리드의 끝선을 대상으로 지정할 수도 있습니다. 이러한 작업 중 하나를 수행하려면 명시적 그리드를 선택하고 일반적으로 레이아웃을 모두 설계하고 그리드 선이 어디로 가야 하는지와 트랙의 크기를 정확히 알고 있을 때 선택합니다.

저는 행 트랙에 대해 암시적 그리드를 가장 자주 사용합니다. 열을 정의하고 싶지만 행의 크기가 자동으로 조정되고 내용을 포함하도록 커집니다. grid-auto-columns 및 grid-auto-rows 를 사용하여 암시적 그리드를 어느 정도 제어할 수 있지만 모든 것을 정의하는 경우보다 제어력이 떨어집니다.

콘텐츠의 양과 그에 따른 행과 열의 수를 정확히 알고 있는지 여부를 결정해야 합니다. 이 경우 명시적 그리드를 만들 수 있습니다. 얼마나 많은 콘텐츠가 있는지 알지 못하지만 단순히 행이나 열이 생성되어 있는 모든 것을 유지하기를 원하는 경우 암시적 그리드를 사용합니다.

그럼에도 불구하고 둘을 결합하는 것은 가능합니다. 아래 CSS에서 Explicit Grid에 3개의 열과 3개의 행을 정의했으므로 콘텐츠의 처음 3개 행은 다음과 같습니다.

• 높이가 200px 이상인 트랙이지만 콘텐츠를 높이려면 확장,
• 높이 400px로 고정된 트랙,
• 높이가 최소 300px인 트랙(하지만 확장됨).

추가 콘텐츠는 암시적 그리드에서 생성된 행으로 이동하고 grid-auto-rows 속성을 사용하여 해당 트랙의 높이를 최소 300px로 만들고 auto 로 확장합니다.

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

유연한 수의 열이 있는 유연한 그리드

Repeat Notation, autofill 및 minmax를 사용하여 컨테이너에 들어갈 수 있는 만큼의 트랙 패턴을 생성할 수 있으므로 미디어 쿼리가 어느 정도 필요하지 않습니다. 이 기술은 이 비디오 자습서에서 찾을 수 있으며 최근 기사 "2018년 반응형 디자인에 미디어 쿼리 사용"에서 유사한 아이디어와 함께 시연되었습니다.

공간이 더 적을 때 콘텐츠가 이전 콘텐츠 아래로 떨어지는 것을 원하고 크기 조정에 많은 유연성을 허용할 때 이 기술을 선택합니다. 열을 최소 크기로 표시하고 자동 채우기 를 특별히 요청하셨습니다.

설문 조사에서 사람들이 고정된 수의 열이 있는 그리드를 정말로 원할 때 이 방법을 선택하고 있는지 궁금하게 만드는 몇 가지 의견이 있었습니다. 특정 중단점에서 예측할 수 없는 열 수로 끝나는 경우 auto-fill 또는 auto-fit 을 사용하는 것보다 열 수를 설정하고 필요에 따라 미디어 쿼리로 재정의하는 것이 더 나을 수 있습니다.

어떤 트랙 크기 조정 방법을 사용해야 합니까?

내 기사 "저 상자의 크기는 얼마입니까?"에서 트랙 크기 조정에 대해 자세히 설명했습니다. 그러나 그리드 레이아웃에서 크기 조정 이해하기”에서 나는 종종 어떤 트랙 크기 조정 방법을 사용할 것인지에 대한 질문을 받습니다. 특히 퍼센트 사이징과 fr 단위의 차이에 대해 질문을 받습니다.

단순히 fr 단위를 지정된 대로 사용하면 사용 가능한 공간을 분배하기 때문에 백분율을 사용하는 것과 다릅니다. 트랙에 더 큰 항목을 배치하면 fr until이 작동하는 방식은 트랙이 더 많은 공간을 차지하고 남은 것을 분배하는 것입니다.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

fr 단위가 그리드 컨테이너의 모든 공간을 분배하도록 하려면 minmax() 를 사용하여 최소 크기를 0 으로 지정해야 합니다.

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

따라서 다음 시나리오 중 하나에서 fr 을 사용하도록 선택할 수 있습니다. auto(기본 동작)를 기반으로 공간 분배를 원하는 시나리오와 균등 분배를 원하는 시나리오. 나는 일반적으로 fr 단위를 사용하여 크기를 조정하고 고정 너비 트랙 또는 간격을 사용할 수 있습니다. 백분율을 대신 사용하는 유일한 경우는 다른 레이아웃 방법도 사용하는 기존 레이아웃에 그리드 구성 요소를 추가할 때입니다. 내 그리드 구성 요소가 백분율을 사용하는 부동 또는 플렉스 기반 레이아웃과 정렬되도록 하려는 경우 내 그리드 레이아웃에서 사용하는 것은 모든 것이 동일한 크기 조정 방법을 사용한다는 것을 의미합니다.

항목을 자동 배치하거나 위치를 설정하시겠습니까?

레이아웃에 하나 또는 두 개의 항목만 배치하면 되고 나머지는 콘텐츠 순서에 따라 배치되는 경우가 많습니다. 사실, 이것은 소스와 시각적 디스플레이의 연결을 끊지 않은 정말 좋은 테스트입니다. 자동 배치를 기반으로 물건이 거의 제자리에 떨어지면 아마도 좋은 순서일 것입니다.

그러나 일단 모든 것이 어디로 가는지 결정하고 나면 모든 것에 위치를 지정하는 경향이 있습니다. 이것은 누군가가 문서에 무언가를 추가하고 그리드가 예상치 못한 어딘가에 자동으로 배치하여 레이아웃을 버리는 경우 이상한 일이 발생하지 않는다는 것을 의미합니다. 모든 것이 배치되면 그리드는 해당 항목을 다음으로 사용 가능한 빈 그리드 셀에 넣습니다. 정확히 원하는 위치가 아닐 수도 있지만 레이아웃의 끝 부분에 앉는 것이 중간에 튀어 나와 다른 것을 밀어내는 것보다 나을 것입니다.

어떤 포지셔닝 방법을 사용할 것인가?

그리드 레이아웃으로 작업할 때 궁극적으로 모든 것은 한 줄에서 다른 줄로 항목을 배치하는 것입니다. 다른 모든 것은 본질적으로 이를 위한 도우미입니다.

라인의 이름을 지정할지, 그리드 템플릿 영역을 사용할지 또는 다양한 유형의 레이아웃을 조합하여 사용할지 팀과 함께 결정하십시오. 특히 작은 구성 요소에 그리드 템플릿 영역을 사용하는 것을 좋아합니다. 그러나 옳고 그름은 없습니다. 당신에게 가장 좋은 것을 찾으십시오.

다른 레이아웃 메커니즘과 결합된 그리드

그리드 레이아웃은 모든 것을 지배하는 유일한 레이아웃 방법이 아니라 특정 유형의 레이아웃, 즉 2차원 레이아웃을 위해 설계되었음을 기억하십시오. 다른 레이아웃 방법이 여전히 존재하며 각 패턴과 가장 적합한 패턴을 고려해야 합니다.

레이아웃 방법을 사용하여 실제로 설계되지 않은 작업을 수행하는 데 익숙한 우리에게는 이것이 실제로 상당히 어렵다고 생각합니다. 한 발 물러서서 디자인된 작업의 레이아웃 방법을 살펴보고 이러한 작업에 사용하는 것을 잊지 마세요.

특히, Grid와 Flexbox에 대한 글을 아무리 자주 써도 사람들 은 어느 것을 사용해야 하는지 물어볼 것입니다. 어느 레이아웃 방법이든 완벽하게 이해되는 패턴이 많이 있으며 실제로는 사용자에게 달려 있습니다. 그리드 대신 Flexbox를 선택하거나 Flexbox보다 그리드를 선택하는 것에 대해 아무도 당신에게 소리를 지르지 않을 것입니다.

제 작업에서 저는 Flexbox를 구성 요소에 사용하는 경향이 있습니다. 구성 요소의 자연스러운 크기가 레이아웃을 강력하게 제어하여 기본적으로 다른 항목을 밀어주길 원하는 경우입니다. 또한 Box Alignment 속성은 Flexbox 및 Grid에서만 사용할 수 있으므로 정렬을 원하기 때문에 Flexbox를 자주 사용합니다. 해당 하위 항목을 정렬할 수 있도록 하나의 하위 항목이 있는 Flex 컨테이너가 있을 수 있습니다.

아마도 Flexbox가 내가 선택해야 하는 레이아웃 방법이 아니라는 신호는 플렉스 항목에 백분율 너비를 추가하기 시작하고 flex-grow 를 0으로 설정할 때입니다. 플렉스 항목에 백분율 너비를 추가하는 이유는 종종 2차원으로 정렬합니다(2차원으로 정렬하는 것이 정확히 Grid의 용도입니다). 그러나 둘 다 시도하고 내용이나 디자인 패턴에 가장 적합한 것으로 보이는 것을 확인하십시오. 그렇게 하면 문제가 발생하지 않을 것입니다.

중첩 그리드 및 플렉스 항목

이것도 많이 나오는데, Grid Item을 Grid Container로 만드는 데 전혀 문제가 없으므로 한 그리드를 다른 그리드 안에 중첩합니다. Flexbox로 동일한 작업을 수행하여 Flex 항목 및 Flex 컨테이너를 만들 수 있습니다. Grid Item과 Flex Container 또는 Flex Item을 Grid Container로 만들 수도 있습니다. 이 중 어느 것도 문제가 되지 않습니다!

현재 우리가 할 수 없는 것은 하나의 그리드를 다른 그리드 안에 중첩하고 중첩된 그리드가 전체 부모에 정의된 그리드 트랙을 사용하도록 하는 것입니다. 이것은 매우 유용할 것이며 그리드 사양의 레벨 2에 있는 서브그리드 제안이 해결하고자 하는 것입니다. 중첩 그리드는 현재 새 그리드가 되므로 모든 상위 트랙과 정렬되도록 크기 조정에 주의해야 합니다.

한 페이지에 많은 그리드를 가질 수 있습니다.

설문 조사에서 몇 번이나 댓글이 떠서 놀랐습니다. 그리드는 기본 레이아웃으로 제한되어야 하고 한 페이지에 많은 그리드가 좋지 않을 수도 있다는 생각이 있는 것 같습니다. 원하는 만큼 그리드를 가질 수 있습니다! 큰 것과 작은 것에는 그리드를 사용하고, 그리드로 배치하는 것이 타당하다면 그리드를 사용하세요.

폴백 및 이전 브라우저 지원

“@supports와 함께 그리드를 사용하면 예상할 수 있는 레이아웃 변형 수를 더 잘 제어할 수 있습니다. 또한 최신 기술을 사용하지 않는 사람들이 콘텐츠에 액세스하는 것을 막지 않으면서 최신 브라우저를 사용하는 사람들에게 보상할 수 있다는 의미에서 우리의 점진적인 향상 접근 방식과도 정말 잘 맞았습니다.”

— rareloop.com에서 작업하는 Joe Lambert

설문 조사에서 많은 사람들이 구형 브라우저를 언급했지만, 구형 브라우저를 지원하는 것이 어렵다고 느끼는 사람들과 기능 쿼리로 인해 쉽다고 느끼는 사람들과 그리드가 다른 레이아웃 방법을 무시한다는 사실에 합리적으로 균등한 분할이 있었습니다. 나는 "CSS 그리드 사용: 그리드 없이 브라우저 지원"에서 이러한 폴백을 만드는 메커니즘에 대해 길게 썼습니다.

일반적으로 최신 브라우저는 이전 브라우저보다 훨씬 더 상호 운용성이 있습니다. 우리는 실제 "브라우저 버그"를 훨씬 적게 보는 경향이 있으며 HTML과 CSS를 올바르게 사용하면 일반적으로 한 브라우저에서 보는 것과 다른 브라우저에서 보는 것이 동일하다는 것을 알게 될 것입니다.

물론 한 브라우저가 특정 사양이나 사양의 일부에 대한 지원을 아직 제공하지 않은 상황이 있습니다. Grid를 사용하면 브라우저가 서로 짧은 시간 내에 매우 완전하고 상호 운용 가능한 방식으로 Grid Layout을 제공한다는 점에서 매우 운이 좋았습니다. 따라서 테스트에 대한 고려 사항은 Grid가 있는 브라우저와 Grid가 없는 브라우저를 테스트해야 하는 경향이 있습니다. IE10 및 IE11에서 -ms 접두사 버전을 사용하도록 선택했을 수도 있습니다. 그러면 세 번째 유형의 브라우저로 테스트해야 합니다.

최신 그리드 레이아웃(IE 버전 아님)을 지원하는 브라우저는 기능 쿼리도 지원합니다. 즉, 그리드 지원을 사용하기 전에 테스트할 수 있습니다.

그리드를 지원하지 않는 브라우저 테스트하기

그리드 레이아웃을 지원하지 않는 브라우저에서 대체를 사용하는 경우(또는 IE10 및 11에 -ms 접두사 버전을 사용하는 경우) 해당 브라우저가 그리드 레이아웃을 렌더링하는 방법을 테스트하고 싶을 것입니다. 이렇게 하려면 예제 브라우저에서 사이트를 볼 수 있는 방법이 필요합니다.

나는 무의미한 지원을 확인하거나 값 grid 철자를 잘못 입력하여 기능 쿼리를 중단하는 접근 방식을 취하지 않습니다. 이 접근 방식은 스타일시트가 엄청나게 단순하고 기능 쿼리 안에 그리드 레이아웃과 관련된 모든 것을 넣은 경우에만 작동합니다. 이것은 특히 그리드를 광범위하게 사용하는 경우 매우 취약하고 시간이 많이 걸리는 작업 방법입니다. 또한 이전 브라우저는 그리드 레이아웃에 대한 지원이 부족할 뿐만 아니라 지원되지 않는 다른 CSS 속성도 있습니다. "모범 사례"를 찾고 있다면 자신의 작업을 테스트할 수 있는 좋은 위치에 있도록 설정하는 것이 좋습니다!

폴백을 테스트하는 적절한 방법으로 자신을 설정하는 몇 가지 간단한 방법이 있습니다. 가장 쉬운 방법(인터넷 연결 속도가 상당히 빠르고 구독료를 지불하는 데 신경 쓰지 않는다면)은 BrowserStack과 같은 서비스를 사용하는 것입니다. 이것은 실제 브라우저의 전체 호스트에서 웹사이트(귀하의 컴퓨터에서 개발 중인 웹사이트 포함)를 볼 수 있게 해주는 서비스입니다. BrowserStack은 오픈 소스 프로젝트를 위한 무료 계정을 제공합니다.

로컬에서 테스트하려면 대상 브라우저가 설치된 가상 머신을 사용하는 것이 좋습니다. Microsoft는 IE8 및 Edge 버전의 IE와 함께 무료 가상 머신 다운로드를 제공합니다. 그리드를 전혀 지원하지 않는 이전 버전의 브라우저를 VM에 설치할 수도 있습니다. 예를 들어 Firefox 51 이하 버전을 다운로드합니다. 구형 Firefox를 설치한 후 여기에 설명된 대로 자동 업데이트를 끄십시오. 그렇지 않으면 자동으로 자동 업데이트됩니다!

그런 다음 하나의 VM에서 IE11 및 비지원 Firefox에서 사이트를 테스트할 수 있습니다(철자 오류 값보다 훨씬 덜 취약한 솔루션). 설정하는 데 한 시간 정도 걸릴 수 있지만 그러면 대체를 테스트하기에 정말 좋은 위치에 있게 됩니다.

오래된 습관 없애기

“Grid Layout을 처음 사용하는 터라 배워야 할 개념도 많고 속성도 이해해야 하는 부분이 많았습니다. 개념적으로, 나는 수레를 지우고 컨테이너 div에 모든 것을 포장하는 것과 같이 내가 수년간 했던 모든 일을 잊는 것이 가장 어렵다는 것을 알았습니다."

— hiddedevries.nl/en에서 작업하는 히데

설문 조사에 응답한 많은 사람들은 오래된 습관을 버려야 할 필요성과 CSS를 완전히 처음 접하는 사람들이 레이아웃을 배우는 것이 더 쉬울 것이라고 언급했습니다. 동의하는 경향이 있습니다. 사람을 직접 가르칠 때 완전한 초보자는 그리드를 사용하는 데 거의 문제가 없지만 숙련된 개발자는 그리드를 1차원 레이아웃 방법으로 되돌리기 위해 열심히 노력합니다. 플로트 또는 플렉스 기반 그리드에 필요한 행 래퍼를 다시 추가하는 CSS 그리드를 사용하여 "그리드 시스템"을 시도하는 것을 보았습니다.

새로운 기술을 시도하는 것을 두려워하지 마십시오 . 몇 가지 브라우저에서 테스트할 수 있고 잠재적인 접근성 문제를 염두에 두고 있다면 실제로 너무 잘못될 수 없습니다. 그리고 특정 패턴을 만드는 좋은 방법을 찾으면 다른 사람들에게 알려주세요. 우리는 모두 프로덕션에서 그리드를 처음 사용하므로 발견하고 공유할 것이 많습니다.

“Grid Layout은 미디어 쿼리 이후 가장 흥미로운 CSS 개발입니다. 실제 개발자의 요구 사항에 맞게 충분히 고려되었으며 디자이너와 개발자 모두에게 프로덕션 환경에서 사용하는 것은 절대적인 기쁨입니다.”

— trysmudford.com에서 일하는 Trys Mudford

마무리하기 위해 다음은 현재 모범 사례에 대한 매우 짧은 목록입니다! 자신의 상황에서 잘 작동하거나 작동하지 않는 것을 발견했다면 의견에 추가하십시오.

1. 콘텐츠 재주문 가능성에 주의하십시오. 문서 순서에서 시각적 디스플레이의 연결을 끊지 않았는지 확인하십시오.
2. 로컬 또는 원격 가상 머신에서 실제 대상 브라우저를 사용하여 테스트합니다.
3. 이전 레이아웃 방법이 여전히 유효하고 유용하다는 것을 잊지 마십시오. 패턴을 달성하기 위해 다양한 방법을 시도하십시오. Grid를 사용하는 데 매달리지 마십시오.
4. 숙련된 프론트엔드 개발자는 레이아웃 작동 방식에 대한 모든 선입견을 갖고 있을 수 있습니다. 이러한 새로운 방법을 이전 패턴으로 되돌리기보다는 새롭게 살펴보십시오.
5. 계속 시도해보세요. 우리는 모두 처음입니다. 작업을 테스트하고 발견한 내용을 공유하세요.