최근 사용

    도구를 열면 여기에 표시됩니다.

    CSS Grid 생성기

    코드 생성 기능이 있는 시각적 CSS Grid 레이아웃 빌더입니다

    이 도구 공유

    문제 신고

    개인 입력 내용이나 파일은 포함하지 말고 문제를 설명해 주세요.

    이 도구는 얼마나 유용했나요?

    이 도구는 얼마나 유용했나요?

    레이아웃 설정

    프리셋 레이아웃

    항목별 배치

    미리보기나 목록에서 항목을 선택하면 속성을 수정할 수 있습니다.

    CSS Grid 빠른 참조

    그리드 트랙

    유연한 트랙에는 fr 단위를, 고정 트랙에는 px 또는 %를, 콘텐츠 크기에 맞는 트랙에는 auto를 사용하세요.

    repeat() 함수

    repeat(3, 1fr)는 1fr 1fr 1fr의 줄임 표현입니다. 반응형 그리드에는 auto-fill 또는 auto-fit을 사용하세요.

    항목 걸치기

    트랙 N개에 걸치려면 span N을, 모든 열 또는 행에 걸치려면 1 / -1을 사용하세요.

    실시간 미리보기

    생성된 CSS

    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

    설정을 바꾸거나 항목을 선택하세요. 미리보기와 CSS가 함께 갱신됩니다.

    CSS Grid 생성기 소개

    CSS Grid 생성기는 CSS Grid 레이아웃을 설계하고 생성하는 대화형 시각적 도구입니다. CSS Grid Layout은 열과 행을 동시에 정의할 수 있는 CSS에서 가장 강력한 2차원 레이아웃 시스템입니다. 이 도구로 직접 만져 보며 CSS Grid를 배우고, 실험하고, 실무에 쓸 수 있는 코드를 생성할 수 있습니다.

    디자인

    새로 추가됨

    모든 도구

    개인정보 설정

    분석, 광고, 맞춤 설정에 대한 환경설정을 선택하세요. 필수 저장소는 테마와 저장한 도구 같은 기능이 계속 작동하도록 합니다.

    필수 저장소는 항상 사용됩니다.