IT & 디지털 미디어

CSS Flexbox / Grid 레이아웃 생성기

시각적으로 Flex와 Grid 속성을 조절하고 CSS 코드를 추출합니다.

한눈에 요약

레이아웃 방식과 열 수, 간격을 선택하면 바로 적용할 수 있는 CSS 코드가 생성됩니다. 카드 목록, 갤러리, 버튼 그룹처럼 반복 요소를 정렬할 때 활용해 보세요.

실시간 자동 연산100% 브라우저 연산검토 완료

실시간 연산

계산 결과

수치를 입력하면 실시간으로 계산됩니다.

공식레이아웃 너비 = 컨테이너 너비에서 열 사이 간격을 뺀 값 ÷ 열 수

계산 예시카드 9개를 3열 Grid, 간격 24px로 설정하면 grid-template-columns: repeat(3, minmax(0, 1fr)) CSS가 생성됩니다.

CSS Flexbox / Grid 레이아웃 생성기 사용법

반복되는 카드, 상품, 이미지, 버튼을 정렬할 때 레이아웃 방식과 항목 수, 열 수, 간격을 입력하면 기본 CSS 구조를 빠르게 만들 수 있습니다. 행과 열을 함께 제어해야 하면 Grid를, 한 방향으로 유연하게 배치해야 하면 Flexbox를 선택하세요.

생성 결과의 .layout 선택자는 컨테이너 클래스에 맞게 변경한 뒤 스타일시트에 붙여 넣으면 됩니다. Flexbox 결과에서는 .layout > * 규칙이 각 자식 요소의 기본 너비를 지정합니다.

Grid는 동일한 너비의 열을 지정하고 gap으로 항목 사이 간격을 만듭니다. Flexbox는 전체 너비에서 열 사이 간격을 뺀 뒤, 남은 공간을 열 수로 나누어 각 항목의 기준 너비를 계산합니다.

\text{각 항목의 너비} = \frac{\text{컨테이너 너비} - \left(\text{열 수} - 1\right) \times \text{간격}}{\text{열 수}}

상황 1: 상품 카드 9개를 3열, 간격 24px로 배치한다면 Grid를 선택합니다. grid-template-columns: repeat(3, minmax(0, 1fr))와 gap: 24px가 생성되며, 화면에는 약 3행으로 배치됩니다.
상황 2: 버튼 8개를 4열, 간격 16px로 정렬한다면 Flexbox를 선택합니다. 열 사이 전체 간격은 16 × 3 = 48px이고, 각 버튼은 남은 너비의 4분의 1을 기준 너비로 사용합니다.

최종 내용 검토일: 2026-08-15

Q&A

Flexbox와 Grid는 언제 구분해서 사용하나요?

한 방향으로 요소를 정렬하거나 버튼처럼 내용 크기에 따라 자연스럽게 배치하려면 Flexbox가 편리합니다. 행과 열을 함께 제어하는 카드 목록, 갤러리, 대시보드에는 Grid가 더 적합합니다.

반응형 레이아웃은 어떻게 적용하나요?

기본 열 수를 정한 뒤 미디어 쿼리에서 열 수를 줄이면 됩니다. Grid는 작은 화면에서 repeat(2, minmax(0, 1fr)) 또는 1열로 바꾸고, Flexbox는 flex-basis 값을 넓게 조정하는 방식을 권장합니다.