LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

CSS 그리드 생성기

자체 기획 도구찾는 도구가 없나요?

grid-template 레이아웃을 만들고 CSS 복사

실시간 그리드 미리보기에서 열과 행의 개수, 간격을 설정하고, 필요하면 열을 minmax() 트랙으로 전환하여 줄바꿈되기 전에 먼저 줄어들도록 만든 뒤, 완성된 컨테이너 선언을 복사하세요. 이 과정은 모두 브라우저 안에서만 이루어집니다.

출력
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

grid-template-columns: repeat(n, 1fr)은 동일한 너비의 열을 만들지만 내용물보다 작게 줄어들지 않아 좁은 화면에서 넘칠 수 있습니다. minmax(min, 1fr)로 바꾸면 각 열이 그리드가 줄바꿈을 시도하기 전에 지정한 최솟값까지 줄어들 수 있게 되며, 이는 휴대폰에서도 잘 보이는 레이아웃과 그렇지 않은 레이아웃의 차이를 만듭니다. 이 도구는 같은 설정으로 두 형태를 모두 만들어, 선언만이 아니라 실제 그리드에서 그 차이를 확인할 수 있게 합니다.

사용 방법

  1. 열과 행의 개수를 설정하세요.
  2. 셀 사이의 간격을 설정하세요.
  3. 좁은 화면에서 열이 줄어들게 하려면 minmax() 열을 켠 뒤 CSS를 복사하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

미리보기는 실제 CSS 그리드인가요?
네. 번호가 매겨진 셀들은 지금 설정하고 있는 정확한 grid-template-columns와 grid-template-rows로 배치됩니다.
minmax()는 실제로 무엇을 바꾸나요?
minmax() 없이 repeat(n, 1fr) 열은 서로 같은 너비를 유지하지만 내용물보다 작게 줄어들지 않으므로, 컨테이너가 좁아지면 그냥 넘쳐버립니다. minmax(min, 1fr)를 사용하면 브라우저가 다른 방식을 찾기 전에 각 열이 지정한 최솟값까지 먼저 줄어듭니다.
업로드되는 정보가 있나요?
아니요. 선언 코드는 설정한 옵션으로부터 조립되는 텍스트이며, 미리보기 그리드도 페이지 안에서 로컬로 렌더링됩니다.

전체 도구로 돌아가기