Google Material Design

Material Design

The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

레이아웃 그리드는 화면 크기와 방향에 맞춰, 레이아웃 전체에 일관성을 유지합니다.

Why? 왜 일관성을 유지시켜 주는 게 좋을까

Google Material에 따르면, 아래와 같은 이유가 있다.

일관성을 유지시켜준다.

반응형 디자인의 경우, 해상도 대응이 쉬워진다.

Columns

On mobile, at a breakpoint of 360 dp, this layout grid uses 4 columns.

On tablet, at a breakpoint of 600 dp, this layout grid uses 8 columns.

Gutters

On tablet, at a breakpoint of 600 dp, this layout grid uses 8 columns.

On tablet, at a breakpoint of 600 dp, this layout grid uses 24dp gutters.

Margins

On mobile, at a breakpoint of 360 dp, this layout grid uses 16dp margins.

On a small tablet, at a breakpoint of 600 dp, this layout grid uses 24dp margins.

Breakpoint System

: 특정 지점을 기준으로 화면의 레이아웃이 바뀌는 지점을 말한다.      

 

 

참고 문헌

구글 머티리얼 디자인 참고_Link