어떤 Grid 속성을 조작할 수 있나요?

grid-template-columns, grid-template-rows, gap 등을 시각적으로 설정할 수 있습니다.

fr 단위를 지원하나요?

네. fr, px, % 등의 단위를 사용할 수 있습니다.

네. 복사한 코드를 CSS 파일에 그대로 붙여넣어 사용할 수 있습니다.

모든 처리는 브라우저에서 이루어지며, 데이터는 서버로 전송되지 않습니다.

시각적 편집기에서 열과 행을 설정할 수 있으며, 생성된 CSS에는 grid-template-columns와 grid-template-rows가 포함됩니다. 명명된 영역 설정은 출력 CSS를 직접 편집하여 할 수 있습니다.

열 수·행 수·간격을 설정해 그리드 레이아웃을 시각적으로 구축해요. fr/px/auto 등 단위를 지원해요.

columnTemplate

rowTemplate

gap8px

preview

columnTemplate

1fr 1fr 1fr

rowTemplate

1fr 1fr

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

어떤 Grid 속성을 조작할 수 있나요?: grid-template-columns, grid-template-rows, gap 등을 시각적으로 설정할 수 있습니다.
fr 단위를 지원하나요?: 네. fr, px, % 등의 단위를 사용할 수 있습니다.
생성된 CSS를 그대로 사용할 수 있나요?: 네. 복사한 코드를 CSS 파일에 그대로 붙여넣어 사용할 수 있습니다.
데이터가 서버로 전송되나요?: 모든 처리는 브라우저에서 이루어지며, 데이터는 서버로 전송되지 않습니다.
grid-template-areas를 설정할 수 있나요?: 시각적 편집기에서 열과 행을 설정할 수 있으며, 생성된 CSS에는 grid-template-columns와 grid-template-rows가 포함됩니다. 명명된 영역 설정은 출력 CSS를 직접 편집하여 할 수 있습니다.

최종 업데이트: 2026-02-21