Skip to main content

CSS 그리드 플레이그라운드 템플릿 열, 행 및 간격에 대한 상호 작용형 컨트롤을 갖춘 시각적 CSS 그리드 빌더입니다.

CSS 그리드 플레이그라운드 illustration
🎨

CSS 그리드 플레이그라운드

템플릿 열, 행 및 간격에 대한 상호 작용형 컨트롤을 갖춘 시각적 CSS 그리드 빌더입니다.

1

그리드 구조 정의

열과 행의 수를 설정하거나 사용자 지정 템플릿 값을 입력하세요.

2

간격 및 맞춤 조정

열과 행 간격을 제어하고 justify-items와 align-items를 설정합니다.

3

CSS 복사

그리드 레이아웃을 미리 보기하고 CSS 코드를 복사하세요.

Loading tool...

What Is CSS 그리드 플레이그라운드?

CSS Grid Playground는 CSS에서 가장 강력한 레이아웃 시스템인 CSS Grid 레이아웃을 위한 대화형 빌더입니다. 그리드는 행과 열 모두에 대해 2차원 제어를 제공하여 복잡한 페이지 레이아웃에 이상적입니다. 이 도구는 두 가지 모드를 제공합니다: 자동 모드에서는 간단한 등간격 격자 için repeat(n, 1fr)를 사용하며, 수동 모드에서는 1fr 2fr 1fr 또는 200px auto 200px와 같은 사용자 지정 템플릿 값을 입력할 수 있습니다. 열과 행의 간격을 독립적으로 제어하고, 격자 셀 내에서 콘텐츠 정렬을 위해 justify-items 및 align-items를 설정할 수 있습니다. 시각적 미리보기에서는 색상이 있는 격자 항목을 표시하여 레이아웃 구성이 정확히 어떻게 작동하는지 볼 수 있습니다. 이 도구는 Grid 학습과 프로덕션 레이아웃의 원형 제작 모두에优秀합니다.

Why Use CSS 그리드 플레이그라운드?

  • 유연성을 위한 자동 및 사용자 지정 템플릿 모드
  • 독립적인 열과 행 간격 제어
  • 셀 내용 맞춤을 위한 justify-items와 align-items
  • 색상이 있는 그리드 항목으로 상호 작용하는 시각적 미리 보기

Common Use Cases

페이지 레이아웃

헤더, 사이드바, 콘텐츠 및 푸터와 같은 완전한 페이지 레이아웃을 디자인합니다.

이미지 갤러리

일관된 간격으로 반응형 이미지 그리드 갤러리를 생성합니다.

대시보드 레이아웃

다양한 크기의 그리드 영역을 사용하여 대시보드 위젯 레이아웃을 구축합니다.

CSS Grid 학습

2차원 레이아웃을 이해하기 위해 그리드 속성을 실험합니다.

Technical Guide

CSS Grid는 컨테이너에서 display: grid로 활성화됩니다. grid-template-columns는 길이 값, fr 단위(분수) 또는 repeat() 및 minmax()와 같은 함수를 사용하여 열 트랙을 정의합니다. fr 단위는 사용 가능한 공간을 비례적으로 분배합니다. grid-template-rows도 행 트랙에 대해 동일한 방식으로 작동합니다. gap(또는 row-gap 및 column-gap)은 트랙 사이의 간격을 설정합니다. justify-items와 align-items는 격자 셀 내에서 콘텐츠가 어떻게 정렬되는지 제어합니다. 격자 항목은 grid-column: span n 및 grid-row: span n을 사용하여 여러 셀을 확장할 수 있습니다. grid-template-areas를 사용하는 명명된 격자 영역은 복잡한 레이아웃을 시각적으로 정의하는 방법을 제공합니다. repeat()의 auto-fit 및 auto-fill 키워드는 미디어 쿼리 없이 반응형 레이아웃을 생성합니다: repeat(auto-fit, minmax(250px, 1fr))는 최소 너비와 함께 맞는 만큼의 열을 생성합니다.

Tips & Best Practices

  • 1
    유연한 비례 열 크기를 위한 fr 단위 사용
  • 2
    반응형 레이아웃을 위한 minmax()와 auto-fit 조합
  • 3
    가독성 있는 이름이 지정된 레이아웃 영역을 위한 grid-template-areas 사용
  • 4
    일관된 셀 간격을 위한 gap 설정

Related Tools

Frequently Asked Questions

Q CSS Grid에서 fr은 무엇을 의미합니까?
fr은 사용 가능한 공간을 비례적으로 분배하는 단위입니다. 1fr 2fr은 두 번째 열이 두 배 더 넓은 두 개의 열을 생성합니다.
Q 반응형 그리드를 만드는 방법
컨테이너 너비에 따라 자동으로 열을 조정하는 그리드를 위해 repeat(auto-fit, minmax(250px, 1fr))를 사용하세요.
Q 그리드 항목은 겹칠 수 있습니까?
예, 명시적인 배치를 사용하여 동일한 셀을 차지하는 레이어화된 디자인을 생성할 수 있습니다.
Q Grid와 Flexbox를 언제 사용해야 합니까?
2차원 레이아웃(행과 열)에 Grid를 사용하세요. 1차원 레이아웃(단일 행 또는 열)에 Flexbox를 사용하세요.
Q CSS Grid는 모든 브라우저에서 작동합니까?
CSS Grid는 모든 모던 브라우저에서 지원됩니다. IE11은 일부 차이점이 있는 이전 그리드 사양을 지원합니다.

About This Tool

CSS 그리드 플레이그라운드 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.