Grid

그리드는 콘텐츠를 배치하고 일관된 페이지 레이아웃을 만드는 데 사용해요.

레이아웃 그리드 구조에는 세 가지 요소가 있어요.

Columns

페이지를 동일한 수직 섹션으로 나누고 콘텐츠를 구성하는 데 사용해요.

Gutters

Column 사이의 간격이며 일관된 방식으로 콘텐츠를 구분해요.

Margin

그리드의 바깥쪽 가장자리를 정의하고, 콘텐츠가 보이는 영역 밖으로 넘쳐흐르는 것을 막아요.

Breakpoints

각 Breakpoint는 최적의 사용자 경험을 보장하기 위해 웹사이트 레이아웃이 바뀌는 기준점이에요. 반응형 디자인에서 중단점 범위는 해당 뷰포트 크기에 가장 적합한 열 수와 권장 여백 및 거터 너비를 결정해요.

Breakpoint	Viewport	Columns	Gutters	Margins
mobile	360–767px	4	12px	16px
tablet-vertical	768–1023px	8	16px	24px
tablet-horizontal	1024–1279px	12	16px	24px
desktop	1280+px	12	16px	24px