CSS 그리드 생성기

비주얼 에디터로 반응형 그리드 레이아웃을 만들어보세요

설정

간격

열 간격

행 간격

컨테이너 너비

자동 흐름

항목 정렬

콘텐츠 정렬

그리드 템플릿

열

행

일반 값:

• 1fr - 사용 가능한 공간의 1 분율
• 200px - 고정 픽셀 크기
• auto - 콘텐츠에 따른 자동 크기
• minmax(100px, 1fr) - 반응형 크기 조정
• repeat(3, 1fr) - 반복 패턴

프리셋

그리드 항목

미리보기

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

현재 설정으로 미리보기

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
  grid-auto-flow: row;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}