Bulma Grid Playground

Bulma Grid Playground (그리드 플레이그라운드)

Smart Grid와 Fixed Grid를 직접 다뤄보며 느낌을 익힐 수 있는 대화형 플레이그라운드 페이지예요. 컬럼 수, 간격, 컨테이너 너비를 바꿔가며 그리드가 어떻게 변하는지 확인해 보세요.

출처: 문서

본문

Smart Grid (스마트 그리드)

이 예시를 사용해 다양한 컬럼 너비와 다양한 간격 값으로 Smart Grid를 체험해 볼 수 있어요.

  • 최소 컬럼 너비 (Minimum Column Width): Default ~ 32 사이에서 선택해요. 9rem(기본) 부터 48rem까지 1.5rem 단위예요.
  • 속성 (Property): Gap, Column Gap, Row Gap 중에서 바꿀 대상을 골라요.
  • 값 (Value): Default ~ 8 사이에서 간격 값을 선택해요. 0.5rem 단위예요.

HTML 마크업은 <div class="grid">를 사용해요. 기본 24개 셀(Cell) 배치가 나타나요.

Fixed Grid (고정 그리드)

이 컨트롤을 사용해 다양한 컬럼 수로 Fixed Grid를 체험해 볼 수 있어요.

  • 컬럼 수 (Column Count): Default ~ 12 사이에서 선택해요. 0부터 12까지 has-$n-cols 수정자에 대응해요.
  • 오른쪽의 **핸들(handle)**을 사용해 컨테이너의 너비를 바꿀 수 있어요: 1200

HTML 마크업은 <div class="fixed-grid">를 사용해요. 기본 24개 셀(Cell) 배치가 나타나요.

레이아웃 점프를 막기 위해 의도적으로 공백을 남겨 두었어요.

더 알아보기 (Learn more)