컨텐츠로 건너뛰기
Starlight

카드 그리드

여러 개의 <Card> 또는 <LinkCard> 컴포넌트를 그리드에 래핑하려면 <CardGrid> 컴포넌트를 사용합니다.

미리보기

별

시리우스, 베가, 베텔게우스

달

이오, 유로파, 가니메데

가져오기

import { CardGrid } from '@astrojs/starlight/components';

사용

카드 그룹화

충분한 공간이 있을 때 여러 개의 <Card> 컴포넌트를 <CardGrid> 컴포넌트로 그룹화하여 나란히 표시합니다.

import { Card, CardGrid } from '@astrojs/starlight/components';


<CardGrid>
  <Card title="확인하세요" icon="open-book">
    강조하고 싶은 흥미로운 콘텐츠.
  </Card>
  <Card title="기타 기능" icon="information">
    공유하고 싶은 추가 정보.
  </Card>
</CardGrid>
미리보기

확인하세요

강조하고 싶은 흥미로운 콘텐츠.

기타 기능

공유하고 싶은 추가 정보.

링크 카드 그룹화

충분한 공간이 있을 때 여러 개의 <LinkCard> 컴포넌트를 <CardGrid> 컴포넌트를 사용하여 그룹화하여 나란히 표시합니다.

import { LinkCard, CardGrid } from '@astrojs/starlight/components';


<CardGrid>
  <LinkCard
    title="Markdown으로 콘텐츠 작성"
    href="/ko/guides/authoring-content/"
  />
  <LinkCard title="컴포넌트" href="/ko/components/using-components/" />
</CardGrid>
미리보기
Markdown으로 콘텐츠 작성
컴포넌트

카드를 엇갈리게 배치

그리드의 두 번째 열을 수직으로 이동하여 시각적 흥미를 더하려면 <CardGrid> 컴포넌트에 stagger 속성을 추가합니다.

이 속성은 홈 페이지에서 프로젝트의 주요 기능을 표시하는 데 유용합니다.

import { Card, CardGrid } from '@astrojs/starlight/components';


<CardGrid stagger>
  <Card title="확인하세요" icon="open-book">
    강조하고 싶은 흥미로운 콘텐츠.
  </Card>
  <Card title="기타 기능" icon="information">
    공유하고 싶은 추가 정보.
  </Card>
</CardGrid>
미리보기

확인하세요

강조하고 싶은 흥미로운 콘텐츠.

기타 기능

공유하고 싶은 추가 정보.

<CardGrid> 속성

구현: CardGrid.astro

<CardGrid> 컴포넌트는 다음과 같은 속성을 허용합니다:

stagger

타입: boolean

그리드에 카드를 엇갈리게 배치할지 여부를 정의합니다.