이 CSS 레이아웃 생성기 소개
왼쪽에서 Flexbox 또는 Grid를 고르고, 드롭다운과 숫자 입력으로 방향, 주축 / 교차축 정렬, 줄바꿈, 열 개수, 행 높이, 간격을 조절합니다. 오른쪽 데모 영역에는 몇 개의 색 블록으로 레이아웃이 실시간으로 표현되어 보이는 그대로의 결과를 얻을 수 있습니다.
조정이 끝나면 아래에 대응하는 선언형 CSS가 출력됩니다(Flex의 display / flex-direction / justify-content / align-items / flex-wrap / gap, Grid의 display / grid-template-columns / grid-auto-rows / gap). 복사해 바로 프로젝트에 쓸 수 있습니다. 외부 라이브러리 없이 전부 브라우저에서 실행됩니다.