CSS 그리드 & 플렉스박스 생성기
Grid와 Flexbox 사이를 전환하며 열과 행의 개수, 또는 플렉스 아이템의 방향·정렬과 간격을 조정하면 컨테이너 안의 색상 박스로 실시간 미리보기를 확인할 수 있습니다. 완성되면 정확한 CSS 코드를 복사하세요.
디자인·CSS 도구 브라우저에서 완전히 실행
모든 처리는 사용자의 기기에서 이루어지며, 서버로 전송되지 않습니다.
1
2
3
4
5
6
CSS 코드
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 12px;