Grid 레이아웃

Grid 레이아웃

Grid 레이아웃은 콘텐츠를 고정된 12컬럼 그리드 위에 배치해 주는 레이아웃이에요. 표준화된 컬럼 그리드 위에서 콘텐츠를 정렬하고 싶을 때 사용하면 좋아요.

출처: 문서

본문

요소 (Elements)

  • Grid: 모든 grid 항목을 담는 그리드 컨테이너입니다.
  • Grid item: 그리드 안에 배치할 개별 콘텐츠 섹션입니다.

사용 (Usage)

Grid 항목은 여러 가지 방식으로 정렬하여 그룹을 만들 수 있습니다. 모든 grid 항목의 span 값의 합은 반드시 12가 되어야 하며, 각 항목의 span을 조정해 다양한 섹션 크기 조합을 만들 수 있습니다.

변형 (Variations)

항목 주변 거터 (Gutters around items)

항목 사이의 간격을 조정하려면 거터(gutter)를 적용할 수 있습니다.

더 알아보기 (Learn more)