CSS Flexbox & Grid 놀이터

CSS Flexbox & Grid 놀이터란?

CSS Flexbox & Grid 놀이터는 CSS의 두 주요 레이아웃 모델을 배우고 프로토타이핑하기 위한 무료 시각 샌드박스로, 프런트엔드 개발자·학습자·디자이너를 위해 만들어졌습니다. 모드 토글로 Flex 또는 Grid를 고른 뒤 간단한 드롭다운과 숫자 입력으로 컨테이너 속성을 설정합니다. Flex 모드에서는 flex-direction, flex-wrap, justify-content, align-items를 제어하고, Grid 모드에서는 열과 행 수(repeat(n, 1fr)로 렌더)와 함께 justify-items, align-items를 지정합니다. gap 값과 아이템 수는 두 모드 모두에 적용됩니다. 번호가 매겨진 타일의 실시간 미리보기가 정렬과 간격이 어떻게 동작하는지 그대로 보여 주고, 완성된 .container CSS 규칙이 생성되어 복사할 수 있습니다. flex나 grid 설정이 실제로 어떻게 보이는지 프로젝트에 붙여넣기 전에 확인하고 싶을 때 쓰면 좋습니다.

CSS Flexbox & Grid 놀이터 사용법

1. 모드 토글로 Flex 또는 Grid를 골라 만들 레이아웃 모델을 정합니다.
2. Flex 모드에서는 드롭다운으로 flex-direction, flex-wrap, justify-content, align-items를 설정합니다.
3. Grid 모드에서는 열과 행 수, 그리고 justify-items, align-items를 설정합니다.
4. ‘설정’을 열어 gap(간격, px)과 미리보기에 표시할 아이템 수를 변경합니다.
5. 각 속성을 바꿀 때마다 타일 미리보기가 재배치되는 것을 확인합니다.
6. 생성된 .container CSS 규칙을 복사해 스타일시트에 붙여넣습니다.

예시

Flex · direction row · justify-content center · align-items center · gap 12

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

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

자주 묻는 질문

여기서 Flexbox와 Grid의 차이는 무엇인가요?

Flex 모드는 아이템을 한 축을 따라 배치하며 flex-direction, flex-wrap, justify-content, align-items를 제공합니다. Grid 모드는 grid-template-columns와 grid-template-rows(repeat(n, 1fr)로 작성)에 justify-items, align-items를 더해 2차원 격자에 아이템을 배열합니다. 토글로 모드를 바꿔 같은 정렬을 두 모델이 어떻게 처리하는지 비교해 보세요.

gap 값은 무엇을 하나요?

gap은 CSS gap 속성을 통해 Flex와 Grid 모두에서 아이템 사이의 간격을 픽셀 단위로 설정합니다. 값을 키우면 타일이 더 벌어지고 0으로 두면 딱 붙습니다. 미리보기와 생성 CSS가 즉시 갱신됩니다.

Grid에서 justify-content와 align-items 표기가 다른 이유는?

Grid는 justify-items와 align-items에 start, end, center, stretch 키워드를 쓰고 Flex는 flex-start, flex-end를 씁니다. 이 도구는 현재 모드에 맞는 올바른 키워드를 출력하므로 복사한 CSS는 항상 유효합니다.

표시되는 아이템 수를 바꿀 수 있나요?

네. ‘설정’을 열어 아이템 수를 바꾸면 번호가 매겨진 미리보기 타일을 늘리거나 줄일 수 있습니다(최대 24개). 이는 화면상의 시연에만 영향을 주며, 생성된 CSS는 아이템이 아니라 컨테이너를 기술합니다.

제 데이터가 어딘가로 업로드되나요?

아니요. 이 놀이터는 전부 JavaScript로 브라우저 안에서 실행되므로 설정과 생성된 CSS가 서버로 전송되지 않습니다. 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.