CSS Grid 플레이그라운드
CSS Grid 템플릿, 간격, 배치를 시각적으로 구성하고 레이아웃 CSS를 복사하세요.
미리보기
그리드에서 번호가 매겨진 항목을 클릭해 선택하고 위치를 변경하세요.
grid-template-columns
—
grid-template-rows
—
생성된 CSS
—
—
열
행
간격
정렬
16px
16px
그리드 항목
항목 1
아직 항목이 없습니다. 항목을 추가해 그리드에 배치하세요.
프리셋CSS Grid 플레이그라운드 소개
CSS 그리드 플레이그라운드는 실제 그리드 레이아웃을 시각적으로 구성해 볼 수 있는 도구입니다. 열과 행 트랙을 추가하거나 제거해 grid-template-columns와 grid-template-rows를 만들고, 열/행 간격을 설정하며, justify-items, align-items, justify-content, align-content 네 가지 정렬 속성을 모두 조정할 수 있습니다. 미리보기는 변경 사항을 즉시 반영합니다.
그리드가 진가를 발휘하는 부분은 아이템 배치입니다. 아이템을 추가하고 미리보기에서 하나를 클릭해 선택한 다음, 열 시작, 열 병합, 행 시작, 행 병합으로 위치를 지정하세요. 이것이 사이드바, 헤더, 여러 트랙을 아우르는 특징적인 셀을 만드는 방법이며, 실제 그리드 레이아웃 대부분의 뒤에 숨은 기법입니다.
holy grail, 대시보드, 갤러리 세 가지 프리셋으로 전형적인 페이지 구조를 불러와 분석하고 응용할 수 있습니다. 레이아웃이 마음에 들면 생성된 CSS를 복사하세요. 여기에는 완전한 그리드 컨테이너 규칙과 각 아이템의 배치 정보가 모두 담겨 있습니다.
CSS Grid 플레이그라운드 사용 방법
- 열과 행 트랙을 추가하거나 제거해 그리드 템플릿을 정의합니다.
- 열 간격과 행 간격을 설정합니다.
- justify-items, align-items, justify-content, align-content 정렬 옵션을 조정합니다.
- 아이템을 추가하고 미리보기에서 하나를 클릭한 뒤, 열/행 시작과 병합 값을 설정해 배치합니다.
- holy grail, 대시보드, 갤러리 프리셋을 불러와 전형적인 레이아웃을 살펴봅니다.
- 생성된 CSS를 스타일시트에 복사합니다.
자주 묻는 질문
justify-items는 각 아이템을 자신의 그리드 셀 안에서 정렬하고, justify-content는 트랙이 컨테이너를 다 채우지 못할 때 그리드 전체를 컨테이너 안에서 정렬합니다. 세로 방향에서도 align-items와 align-content 사이에 같은 구분이 적용됩니다.
아이템을 선택하고 열 병합 값을 늘리세요. 출력되는 CSS는 span 값을 가진 grid-column을 사용합니다. 행 병합과 함께 사용하면 같은 그리드 안에서 헤더 바, 사이드바, 큰 특징 셀을 만들 수 있습니다.
전형적인 페이지 골격으로, 전체 너비 헤더와 푸터 사이에 내비게이션, 본문, 사이드 영역 세 개의 열이 있는 구조입니다. float로 구현하기 매우 까다로웠던 레이아웃인데, 이 프리셋은 몇 번의 그리드 배치만으로 깔끔하게 해결하는 방법을 보여줍니다.
그리드는 행과 열이 정렬되어야 하는 2차원 레이아웃(페이지 골격, 대시보드, 갤러리)에 강합니다. 플렉스박스는 툴바나 메뉴처럼 1차원 흐름에 가장 적합합니다. 페이지에는 그리드를, 컴포넌트 내부에는 플렉스를 쓰는 식으로 함께 사용하면 잘 어울립니다.
네, 무료이며 브라우저에서 바로 실행됩니다. 원하는 만큼 실험해도 좋고, 만든 내용은 기기 밖으로 나가지 않습니다.
인기 검색어
css grid 생성기
css grid 플레이그라운드
grid-template-columns 생성기
css grid 레이아웃 생성기
grid-template-areas 빌더
css grid 간격 도구
css grid 시각화 도구
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.