디자인 · 무료

CSS Grid 생성

열, 행, 간격 값으로 그리드 미리보기와 CSS를 생성합니다.

01값 입력

브라우저에서 실행

—

브라우저에서 실행

열, 행, 간격 값으로 그리드 미리보기와 CSS를 생성합니다.

브라우저에서 실행

입력은 이 페이지에서 처리되며 서버로 전송되지 않습니다.

도구 소개

동일 너비 열의 CSS Grid를 만들고 페이지에 맞게 코드를 조정하세요.

값 입력
열 · 행 · 간격
계산 / 생성
열, 행, 간격 값으로 그리드 미리보기와 CSS를 생성합니다.
결과
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

동일 너비 열의 CSS Grid를 만들고 페이지에 맞게 코드를 조정하세요.

예시

결과

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

결과는 어떻게 해석하나요?

동일 너비 열의 CSS Grid를 만들고 페이지에 맞게 코드를 조정하세요.

데이터는 어디로 가나요?

계산은 기기에서 실행됩니다. 입력은 서버로 전송되지 않습니다.