.container { display: flex }
Flexbox와 CSS Grid 속성을 실시간으로 조작하며 배울 수 있는 인터랙티브 플레이그라운드입니다. 버튼 클릭 한 번으로 레이아웃 변화를 즉시 확인하고, 생성된 CSS를 그대로 복사해 프로젝트에 바로 사용하세요. 모든 처리는 브라우저 로컬에서만 이뤄집니다. 서버 전송 없음.
flex-direction, wrap, justify-content, align-items, align-content, gap 전부 인터랙티브 조작.
grid-template-columns/rows 직접 입력, gap, justify-items, align-items, 아이템 span 지정.
Container / Item 탭으로 분리된 CSS 코드를 클릭 한 번으로 클립보드 복사.
서버 전송 없음. 데이터는 브라우저 로컬에서만 처리됩니다.