CSS 그리드 레이아웃을 사용하여 카드 레이아웃을 만드는 방법

편집자 주: 이 게스트 게시물은 UX 소프트웨어 엔지니어이자 코드 제작 기술을 사랑하는 웹 디자이너인 Abbey Fitzgerald가 작성했습니다.

CSS 그리드 레이아웃은 웹사이트 콘텐츠를 보다 효율적으로 배치할 수 있도록 웹 디자이너의 작업 방식을 변화시키고 있습니다.

오랫동안 기다려 왔지만 마침내 이 접근 방식이 실제로 성공했고 많은 경우 프로덕션 단계에 있습니다. 그것은 웹사이트가 디자인되는 방식에 혁명을 일으켰고 일단 디자이너가 요령을 터득하면 웹 레이아웃에 더 많은 유연성을 제공할 것입니다.

CSS Grid로 디자인을 시도하고 웹에서 자습서를 확인한 경우 전체 레이아웃 접근 방식과 관련된 정보를 찾았을 수 있습니다. 헤더, 내용, 바닥글 등

그러나 CSS Grid는 카드와 같은 다른 웹 사이트 세부 정보에도 유용할 수 있습니다. 카드 레이아웃은 콘텐츠를 표시하는 일반적인 방법이며 CSS 그리드를 사용하여 효율적으로 만들 수 있습니다. 이 방법을 사용하면 카드 콘텐츠 영역을 쉽게 반복할 수 있고 다양한 장치 유형에서 볼 수 있으며 크기를 쉽게 제어할 수 있습니다.

CSS 그리드 레이아웃 도구

진행하면서 페이지의 항목을 검사하고 싶을 것입니다. Firefox에는 그리드 영역을 볼 수 있는 훌륭한 개발자 도구가 있습니다. Firefox 개발자 도구를 사용하면 그리드의 윤곽을 나타내는 오버레이를 볼 수 있습니다. Firefox Developer Edition에도 이 기능이 있습니다.

표시할 오버레이 그리드를 선택합니다(디자인에 따라 둘 이상이 있을 수 있음). 그리드 표시 설정을 사용하면 라인 번호, 영역 이름 및 원하는 라인 확장 방법을 표시하여 자세히 살펴볼 수 있습니다. 설계할 때 도움이 됩니다.

CSS 그리드 레이아웃이 있는 간단한 카드

CSS 그리드를 처음 사용하는 경우 기본 사항을 정리하고 간단한 CSS 그리드 레이아웃을 만들고 싶을 것입니다. 카드는 콘텐츠를 표시하는 훌륭한 방법일 뿐만 아니라 직관적으로 사용할 수 있는 흥미로운 UI 요소입니다. 또한 사용자가 콘텐츠를 빠르게 스캔하고 가장 관심 있는 항목에 참여할 수 있는 훌륭한 형식을 제공합니다. 또한 디자이너는 카드를 사용하여 멋진 이미지, 소개 콘텐츠, 링크 등을 사용하여 시각적으로 매력적인 방식으로 콘텐츠의 형식을 지정할 수 있습니다!

카드 및 전체 페이지 레이아웃

여담이지만 CSS Grid를 전체 페이지 레이아웃에서 사용할 필요는 없다는 점을 아는 것이 중요합니다. 필요한 경우 페이지의 특정 영역에서 그리드를 사용할 수 있습니다. 이것은 카드 레이아웃에 대한 튜토리얼이므로 페이지의 나머지 부분이 CSS 그리드를 사용하지 않더라도 여기에서만 그리드 접근 방식을 사용할 수 있습니다. 그리드 영역이 정의되고 display: grid; 래퍼에 선언되어 있으면 이 접근 방식을 사용할 수 있습니다.

정해진 수의 카드로 작업하기

경우에 따라 정해진 수의 카드를 계획하는 것이 쉽습니다. 정해진 양의 콘텐츠로 카드 수는 동일하게 유지됩니다. 예를 들어, 비즈니스 제안을 설명하는 4개의 카드가 있을 수 있으며 각 제안은 자체 카드에 있습니다.

이 예제(및 다른 예제)의 경우 모든 .card 항목은 .cards 컨테이너 요소 안에 있습니다. 이를 달성하는 방법은 매우 간단합니다.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

.cards 의 값을 그리드에 표시하는 것이 중요합니다. 이것이 없으면 그리드 영역을 만들 수 없습니다. 다음 단계는 grid-template-columns 정의하고 스타일을 선택하는 것입니다. 실제 카드 스타일은 .card 클래스로 선언됩니다.

이 예에서는 .card 클래스가 포함된 여러 기사 태그를 볼 수 있습니다. 코데펜에서 확인하세요.

설정된 카드 수에 대해 반복

여기에서 카드가 모양을 갖추기 시작합니다. 행당 유동적인 양의 열을 생성하려면 repeat() 함수와 함께 repeat을 사용합니다. 이 함수는 반복할 횟수와 반복할 값의 두 가지 인수를 사용합니다.

예를 들어, grid-template-columns: repeat(3, 200px); grid-template-columns: 200px 200px 200px; .

분수 단위

예제 코드에서 "fr"을 사용하는 것을 볼 수 있습니다. 정확히 무엇입니까? 이 측정 단위는 CSS 그리드에서 인기를 얻었습니다. Fr은 "소수 단위"를 의미하며 1fr 사용 가능한 공간의 1 부분을 차지합니다. 공간 계산을 단순화하는 데 도움이 됩니다.

분수 단위는 단독으로 사용하거나 너비를 1fr 로 지정할 수 있으며 자식 요소도 추가할 수 있습니다. 여러 fr은 모든 하위 요소에서 동일하게 공유됩니다.

다른 분수 단위를 지정할 수 있습니다. 예를 들어 그리드 열이 1fr 2fr 1fr 인 경우 두 개의 분수 단위는 하나의 분수 단위로 두 배의 공간을 차지합니다.

동적 카드 수에 대해 반복

경우에 따라 필요한 카드 수를 모를 수 있으므로 설정된 수를 계획하는 것이 효과가 없습니다. 반복과 동일한 접근 방식을 취하지만 자동 채우기를 사용하여 필요한 만큼 맞출 수 있는 옵션이 있습니다.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

auto-fill 외에도 너비 선언이 필요합니다. px 값을 사용하면 카드가 들어갈 공간이 충분하지 않을 때 오른쪽에 공간이 있을 수 있지만 나중에 볼 수 있듯이 반드시 그럴 필요는 없습니다.

카드 너비에 대한 추가 제어를 위한 Minmax

Minmax는 완벽한 솔루션입니다. 분수 단위 자체가 카드를 전체 너비로 만들 수 있기 때문입니다. 스타일 선언에 반복과 최소값을 모두 추가하면 가능한 빈 공간이 제거되고 카드가 더 유동적으로 나타납니다.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

열은 항상 그리드에 맞고 카드는 최소 200px입니다. 최소 공간이 공간에 완벽하게 맞지 않으면 최대 너비가 작용합니다. 너비가 200픽셀인 다른 카드가 맞지 않으면 다른 카드가 200픽셀보다 커져 행을 더 많은 공간으로 채우고 균등하게 분배됩니다. [기사 id=”21612″ 정렬=”오른쪽”]

이동하는

가장 작은 카드와 가장 큰 카드가 계획되었으므로 모바일에 대해 이야기하기에 좋은 시간입니다. 콘텐츠가 소화 가능한 청크로 되어 있고 카드를 쉽게 확장 및 축소할 수 있기 때문에 카드는 크고 작은 장치에서 잘 작동합니다. CSS Grid는 훌륭한 모바일 경험을 만드는 데 도움이 되며 경우에 따라 별도의 미디어 쿼리를 사용하는 것보다 훨씬 쉽습니다.

이 예에서 카드는 모바일에 맞도록 크기를 줄이고 사용 가능한 공간의 일부가 되도록 크기를 늘려야 합니다. 이렇게 하면 더 작은 장치에서 전체 너비로 표시되며 별도의 미디어 쿼리가 필요하지 않습니다.

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

카드의 최소 너비는 300px입니다. 들어갈 수 있는 만큼의 300px 카드가 행에 나타납니다. 장치가 매우 작은 경우 두 장의 카드를 연속으로 놓을 수 있는 공간이 없을 가능성이 큽니다. 그때 1fr 이 시작됩니다. 분수 단위는 반응형 디자인에 적합합니다. 300px 카드 중 두 개가 맞지 않으면 모바일 보기가 매우 분명해집니다. 1fr 최대 너비로 선언되면 단일 카드가 사용 가능한 모든 공간을 차지하며 서로 쌓입니다.

그리드 갭

이제 카드의 너비가 설정되었으므로 카드 사이에 공간을 두는 결정을 내려야 합니다. 이 속성은 그리드 컨테이너에서 사용할 수 있으며 디자인에서 여백을 쉽게 만들 수 있습니다. Grid-column-gap 각 카드 사이에 공간을 만듭니다. grid-gap 표시되면 grid-row-gap 및 grid-column-gap 의 줄임말을 나타냅니다. Grid-row-gap 카드의 상단과 하단에 있는 공간이고 grid-column-gap 카드의 왼쪽과 오른쪽에 있는 공간입니다.

CSS 그리드 레이아웃 리소스

CSS 그리드 레이아웃에 관해서는 배울 것이 많고 많은 가능성이 있습니다. CSS 그리드 레이아웃에 대해 배우는 가장 좋은 방법은 추가로 읽고 실험하는 것입니다. 유용한 리소스가 많이 있지만 시작하는 데 도움이 되는 몇 가지 리소스는 다음과 같습니다.

• 예제별 그리드
• Wes Bos의 CSS 그리드 레이아웃 과정
• Mozilla CSS 그리드 소개