Flexbox·Grid 생성기CSS flex grid 배치를 눈으로 보며 만들고 Tailwind 로 변환

Flexbox·Grid 생성기 사용법

Flexbox 와 Grid 의 속성을 바꿔 가며 항목이 어떻게 놓이는지 바로 보고, 마음에 드는 배치를 CSS 나 Tailwind 클래스로 복사합니다.

1. 1

   배치 방식을 고릅니다

   Flexbox 는 한 줄로 늘어놓는 배치, Grid 는 열과 행이 있는 격자 배치입니다. 자주 쓰는 틀(가운데 정렬, 사이드바 + 본문, 반응형 자동 열 등)을 눌러 시작해도 됩니다.

2. 2

   컨테이너와 항목을 손봅니다

   방향·줄바꿈·정렬·간격을 고르고, 미리보기에서 항목을 눌러 그 항목만 flex-grow·basis·align-self 나 열·행 차지 칸 수를 바꿉니다. 미리보기 모서리를 끌어 크기를 바꿔 보면 반응형 동작도 확인할 수 있습니다.

3. 3

   코드를 복사합니다

   기본값과 다른 속성만 담은 CSS 와 Tailwind 클래스(컨테이너·항목별)를 복사합니다. 설정은 주소에 남으므로 링크를 보내면 같은 배치가 열립니다.

자주 묻는 질문

align-content 를 바꿔도 아무 변화가 없어요.

align-content 는 항목이 여러 줄로 나뉠 때 줄 사이를 정렬합니다. flex-wrap 을 wrap 으로 두고 항목이 넘칠 만큼 많거나 커야 효과가 보입니다.

Tailwind 에 gap-[14px] 처럼 대괄호가 붙는 건 왜인가요?

Tailwind 기본 간격표는 4px 단위라 그 눈금에 맞지 않는 값은 대괄호 임의값으로 적습니다. 4px 배수로 맞추면 gap-3 같은 기본 클래스로 바뀝니다.

함께 쓰면 좋은 도구

• px vw rem 변환
• CSS 그림자 생성
• CSS 그라디언트 생성
• 화면 비율 계산
• JSON 포매터
• 해시 생성기