ListFan
보관함 · 무료

CSS Grid 생성

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

이 도구는 보관되었습니다. 사용 전에 방법과 날짜가 표시된 데이터를 다시 확인하세요.

01값 입력

브라우저에서 실행

브라우저에서 오프라인으로 작동합니다. 페이지와 필요한 파일을 불러온 뒤에는 처리에 인터넷이 필요하지 않습니다.

예시
px

02CSS Grid 생성

|

브라우저에서 실행

사용 방법

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

브라우저에서 실행

데이터는 내 기기에

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

도구 소개

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

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

도구 사용 ↑
사용 방법
  1. 값 입력
    • 열
    • 행
    • 간격
  2. 계산 방법

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

  3. 예시 · 결과

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

계산 방법

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

CSS Grid 생성

열
3
행
2
간격
16 px
결과
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

자주 묻는 질문

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

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

데이터는 어디로 가나요?

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

용어와 설명

값 입력

열

개수는 소수가 아닌 정수로 입력하세요.

최솟값: 1 · 최댓값: 12

행

개수는 소수가 아닌 정수로 입력하세요.

최솟값: 1 · 최댓값: 12

간격

이 양의 숫자 값을 입력하세요. 필드 옆에 표시된 단위를 사용하세요. px

최솟값: 0 · 최댓값: 100 px

결과

결과

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

입력값을 바탕으로 아래 방법에 따라 계산합니다.

자주 하는 실수와 해결법

CSS Grid 생성

실수: 설명된 범위를 벗어나 결과를 사용하기.

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

제한 및 주요 가정

  • 동일 너비 열의 CSS Grid를 만들고 페이지에 맞게 코드를 조정하세요.
  • 표시 결과는 반올림될 수 있지만 측정 정밀도가 높아지는 것은 아닙니다.

다른 도구

모든 도구