CSS Flexbox & Grid 놀이터

CSS Flexbox & Grid 놀이터란?

CSS Flexbox & Grid 놀이터는 CSS의 두 주요 레이아웃 모델을 배우고 프로토타이핑하기 위한 무료 시각 샌드박스로, 프런트엔드 개발자·학습자·디자이너를 위한 도구입니다. Flex 또는 Grid를 고르고 컨테이너 속성을 설정한 다음, ‘설정’을 열어 각 자식에 스타일을 지정합니다. Flex 모드에서는 order, flex-grow, flex-shrink, flex-basis, align-self를, Grid 모드에서는 열/행 스팬과 align-self를 다룰 수 있습니다. Grid 모드에는 커스텀 트랙 사이징도 있어 200px 1fr이나 repeat(auto-fit, minmax(120px, 1fr)) 같은 임의의 grid-template-columns/rows 값을 입력할 수 있고, 각 셀에 이름을 붙이는 grid-template-areas 시각 편집기(이름 있는 그리드 라인도 함께 생성)도 제공합니다. 번호가 매겨진 타일의 실시간 미리보기가 모든 변경을 반영하며, .container 규칙만 또는 컨테이너와 아이템별 CSS를 함께 복사할 수 있습니다.

CSS Flexbox & Grid 놀이터 사용법

1. 모드 토글로 Flex 또는 Grid를 골라 만들 레이아웃 모델을 정합니다.
2. 컨테이너 속성을 설정합니다 — flex-direction/wrap과 justify/align, 또는 열·행 수와 justify-items/align-items.
3. ‘설정’을 열어 gap과 아이템 수를 바꾸고, 각 자식에 스타일(order, flex-grow/shrink/basis, align-self, 또는 열/행 스팬)을 지정합니다.
4. Grid에서는 트랙 사이징을 ‘커스텀’으로 바꿔 직접 grid-template-columns/rows를 입력합니다 — px, fr, minmax() 또는 repeat(auto-fit/auto-fill, …).
5. grid-template-areas 편집기를 켜고 각 셀에 이름을 붙여 아이템을 영역으로 배치합니다.
6. 컨테이너 CSS만 내보낼지, 컨테이너와 아이템별 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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

자주 묻는 질문

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

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

개별 아이템에 스타일을 지정하려면?

‘설정’을 열고 아이템별 컨트롤로 각 자식에 order, flex-grow, flex-shrink, flex-basis, align-self(Flex) 또는 열/행 스팬과 align-self(Grid)를 지정합니다. 내보내기를 ‘컨테이너 + 아이템’으로 두면 커스터마이즈한 아이템마다 .container > :nth-child(n) 규칙이 추가됩니다.

auto-fit이나 minmax() 같은 커스텀 트랙 크기를 쓸 수 있나요?

네. Grid 모드에서 트랙 사이징을 ‘커스텀’으로 바꾸고 유효한 grid-template-columns/rows 값을 입력하세요 — 픽셀, fr 단위, minmax(), 또는 반응형 열을 위한 repeat(auto-fit/auto-fill, minmax(120px, 1fr)). 입력하는 대로 미리보기와 생성 CSS가 갱신됩니다.

grid-template-areas 편집기는 무엇을 하나요?

Grid 모드에서 켜고 격자의 각 셀에 이름을 붙이면 grid-template-areas 선언이 조립되고 빈 셀은 점(.)이 됩니다. 영역 이름은 이름 있는 그리드 라인도 만들며, 아이템의 grid-area 칸에 이름을 입력하면 그 자식을 해당 영역에 배치할 수 있습니다.

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

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