AZ Tools

CSS Grid 플레이그라운드

개발

grid-template-columns / rows를 직접 편집하거나 흔한 프리셋(3컬럼, 사이드바, holy grail, auto-fit 카드)에서 고르세요. gap·justify-items·align-items를 칩으로 조정하고 미리보기 아이템 수도 바꿀 수 있습니다. 변경이 실시간 반영되며 CSS는 바로 붙여넣을 수 있는 형태. Flexbox 플레이그라운드와 함께 CSS 레이아웃 양 축을 다룹니다.

—

템플릿

프리셋을 누르면 컬럼/행 필드에 로드됩니다.

justify-items
align-items
미리보기
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

사용법

  1. 템플릿 프리셋을 고르거나 grid-template 값을 직접 작성하세요.
  2. gap과 미리보기 아이템 수를 설정하세요.
  3. 칩으로 justify-items / align-items를 조정하세요.
  4. 프로젝트에 CSS를 복사하세요.

자주 묻는 질문

fr이 뭐예요?
남은 여유 공간의 비율. 'repeat(3, 1fr)'는 컨테이너를 동일한 3컬럼으로 분할. 고정 크기와 섞기: '200px 1fr'은 200px 사이드바 + 유연한 본문.
auto-fit vs auto-fill?
둘 다 들어가는 만큼 트랙 생성. auto-fit은 빈 트랙을 접고 auto-fill은 남깁니다. 반응형 카드 그리드 'repeat(auto-fit, minmax(180px, 1fr))'엔 보통 auto-fit.
정렬이 예상과 달라요
justify-items / align-items는 각 셀 내용물의 정렬. 그리드 전체의 정렬은 justify-content / align-content (이 도구엔 아직 없음).
선이나 영역에 이름을 줄 수 있나요?
실제 CSS에선 가능합니다. 다만 플레이그라운드는 가장 흔한 시각 속성에 집중. named lines / grid-template-areas는 강력하지만 일반 미리보기로 시연하기 어렵습니다.

관련 도구

JWT 디코더

JWT의 헤더·클레임·만료를 즉시 확인하세요.

개발00

UUID 생성기

무작위 버전4 UUID를 여러 개 한 번에 생성하고 복사하세요.

개발00

해시 생성기 (SHA)

텍스트로 SHA-1·SHA-256·SHA-384·SHA-512 해시를 생성하세요.

개발00

URL 인코더 / 디코더

URL용으로 텍스트를 퍼센트 인코딩하거나, 인코딩된 URL을 디코딩하세요.

개발00

Base64 인코더 / 디코더

텍스트를 Base64로 인코딩하거나 다시 텍스트로 디코딩하세요.

개발00

JSON 포맷터 & 검증기

브라우저에서 바로 JSON을 포맷·정렬·압축·검증하세요.

개발00