⚡전체 도구 💻개발자 및 코딩 📝텍스트 및 콘텐츠 🎨디자인 및 색상 🖼️이미지 및 멀티미디어 🔢데이터 및 계산 🔒보안 및 비밀번호 📄PDF 도구 📐단위 변환

CSS Flexbox 및 Grid 레이아웃 생성기

CSS Flexbox 및 Grid 그리드 레이아웃을 시각적으로 조율 및 프리뷰하고, 코드와 애니메이션을 즉시 생성합니다。

아이템 개수

배치 방향 (flex-direction)

주축 정렬 (justify-content)

교차축 정렬 (align-items)

줄바꿈 설정 (flex-wrap)

아이템 간격 (gap) 12px

실시간 미리보기 컨테이너

CSS 코드

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

HTML 코드

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

사용 방법

1 CSS Flexbox 및 Grid 레이아웃 생성기를 열고 처리할 내용을 입력·붙여넣기·선택하세요.
2 필요에 맞게 옵션과 출력 형식을 조정하세요.
3 결과를 확인한 뒤 복사하거나 다운로드하세요.

주요 사용 사례

CSS Flexbox 및 Grid 그리드 레이아웃을 시각적으로 조율 및 프리뷰하고, 코드와 애니메이션을 즉시 생성합니다。 일상 업무, 개발, 학습, 빠른 확인에 활용할 수 있습니다.

개인정보와 데이터 처리

이 도구는 브라우저에서 작동합니다. 민감한 자료를 처리하기 전에 기기와 브라우저 환경을 확인하세요.

CSS Flexbox·Grid 레이아웃 생성기: 화면을 보며 조정하고 코드 복사

이 도구를 사용하면 문법을 외우지 않아도 메뉴만으로 Flexbox나 CSS Grid 레이아웃을 만들 수 있습니다. 위쪽에서 'Flexbox 레이아웃'과 'CSS Grid 레이아웃'을 전환하고 +/- 버튼으로 아이템을 1~12개로 정한 뒤 속성을 고르면 오른쪽 미리보기에 바로 적용됩니다. 아래에는 컨테이너 CSS와 그에 맞는 HTML 구조가 생성되며 각각 복사 버튼이 있습니다. 기본 출력은 .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; } 입니다.

Flexbox 모드에서는 flex-direction(row, row-reverse, column, column-reverse), 주축 정렬 justify-content(space-between, space-around, space-evenly 포함), 교차축 정렬 align-items(stretch, baseline 포함), flex-wrap을 설정할 수 있습니다. 주축은 방향에 따라 바뀐다는 점을 기억하세요. flex-direction을 column으로 바꾸면 justify-content는 세로 방향을, align-items는 가로 방향을 제어합니다. 아이템이 너비를 넘을 때 nowrap은 한 줄에 몰아넣고, wrap이어야 다음 줄로 넘어갑니다.

Grid 모드에는 repeat(2, 1fr)부터 repeat(4, 1fr)까지의 균등한 열, 가운데를 넓힌 1fr 2fr 1fr, 컨테이너 너비에 맞춰 열 개수를 자동으로 정하는 반응형 repeat(auto-fit, minmax(100px, 1fr))이 준비되어 있습니다. 행은 auto, repeat(2, 80px), 1fr 1fr 중에서 고를 수 있고, justify-items와 align-items로 각 칸 안에서의 가로·세로 위치를 정합니다. 두 모드가 공유하는 gap 슬라이더(0~40px)는 열과 행 간격을 한 번에 지정해 아이템마다 margin을 주는 것보다 깔끔합니다.

생성되는 코드는 .container의 레이아웃 규칙과 .item HTML 구조뿐이며, 아이템 자체의 색상·크기·여백은 디자인에 맞게 따로 작성해야 합니다. 간단한 기준으로, 버튼 한 줄이나 내비게이션, 요소 가운데 정렬 같은 1차원 배치에는 Flexbox를, 카드 목록이나 대시보드처럼 행과 열을 함께 맞춰야 하는 2차원 레이아웃에는 Grid를 쓰면 됩니다. 모든 변경은 브라우저에서 즉시 반영되므로 속성별 차이를 직접 확인하며 실험해 보세요.

자주 묻는 질문

Flexbox와 Grid 중 무엇을 써야 하나요?

Flexbox는 한 줄 또는 한 열로 늘어놓는 1차원 배치(내비게이션, 버튼 그룹, 가운데 정렬 등)에 적합하고, Grid는 행과 열을 동시에 맞추는 2차원 레이아웃(카드 목록, 페이지 골격)에 적합합니다. 바깥은 Grid, 각 컴포넌트 안은 Flexbox로 함께 쓰는 경우도 많습니다.