Material-UI에는 그리드 레이아웃이 없다?

Material-UI는 2017년 5월 현재(v0.18)에서는 그리드 레이아웃 기능을 제공하지 않습니다. 이것은 Material-UI가 순수한 컴포넌트 라이브러리를 지향하기 때문입니다.
하지만 역시 그것에 구애받지 않고 편리한 그리드 레이아웃을 제공하는 방침이 된 것 같고, 알파 브랜치에서는 구현되고 있습니다.
알파 버전 공식 페이지에서는 레이아웃 섹션에 Grid에 대해 설명합니다.

역호환 없음

Material-UI를 사용하는 기존 React 앱에 그리드 레이아웃을 적용하기 위해 Materi-UI 알파 버전을 설치해 보겠습니다.

$ # インストール済みのパッケージを削除
$ npm uninstall -S material-ui
$ # α版をインストール
$ npm install -S material-ui@next

내 기존 프로젝트에서는 TypeScript와 Webpack을 사용하므로 빌드합니다. 그러면 다양한 오류가 발생합니다. 분명히 그대로는 사용할 수없는 것 같습니다. FlatButton을 찾을 수 없거나 Tab에 필요한 속성이 없다고합니다.

$ webpack
83:44-54 "export 'FlatButton' was not found in 'material-ui'
...

움직이기 위해 한 일

공식 페이지 예 보면서 오류를 기반으로 쓰는 방법이 변경된 부분을 수정합니다. 원래 앱이 쉬웠기 때문에 FlatButton과 Tab을 수정하기 만했습니다. FlatButton은 Button이라는 이름으로 바뀌거나 Tab에서는 onChange 속성이 필수가 되고 있었습니다.

하지만 다시 빌드하면 다시 화가 납니다.

$ webpack
 Module ''material-ui/Button'' has no exported member 'Button'

TypeScript의 형식 정의 (@types/ui-material)가 오래된 상태이므로, 물론 Button은 없습니다. npm install @types/material-ui@next 어쨌든 형식이없는 것 같습니다. 찾아도 찾을 수 없기 때문에 어쩔 수 없기 때문에 형은 이용하지 않기로 합니다.

npm uninstall --save-dev @types/material-ui

이제 무사히 빌드가 통과하게 되었습니다.

Grid 레이아웃

Bootstrap의 Grid 레이아웃과 같은 감각으로 잡습니다. <Grid container> 배치하면 컨테이너가 세로로 쌓입니다. 그 안을 열로 구분하기 위해서 복수의 <Grid item>를 배치해 갑니다.

폭 지정

<Grid item>의 너비는 상대 지정으로 1에서 12로 지정됩니다(12에서 너비 100%). 예를 들어 이런 식으로 지정합니다.

<Grid container>
    <Grid item xs={3}></Grid>
    <Grid item xs={6}></Grid>
    <Grid item xs={3}></Grid>
</Grid>

 ┌───┐┌──────┐┌───┐
 │ 3 ││  6   ││ 3 │
 └───┘└──────┘└───┘

반응형

<Grid item> 너비는 화면 크기에 따라 반응형으로 변경할 수 있습니다. 위의 xs 속성 외에도 화면 크기에 따라 속성 (sm, md, lg, xl)으로 너비를 지정합니다. Bootstrap의 breakpoint와는 값이 다르므로 요주의입니다. 각 중단점의 값은 다음과 같습니다.

xs, 모두

sm, small: 600dp ~

md, medium: 960dp~

lg, large: 1280dp ~

xl, xlarge: 1920dp~

<Grid>
    <Grid item xs={1} md={3} lg={6}></Grid>
</Grid>

센터링 등

가로 방향의 중앙 정렬 등은 <Grid container> 에 justify属性 로 지정합니다. 지정 가능한 속성의 값은 다음과 같습니다.

flex-start: 왼쪽 정렬

center: 중앙 정렬

flex-end: 오른쪽 맞춤

space-between: 정렬(왼쪽 및 오른쪽 가장자리에 공백 없음)

space-around: 정렬(왼쪽과 오른쪽 끝에 공백 있음)

세로 방향은 <Grid container>로 text-align属性로 지정합니다. 지정 가능한 값은 다음과 같습니다.

flex-start: 왼쪽 정렬

center: 중앙 정렬

flex-end: 오른쪽 맞춤

stretch: ??

완성

이런 느낌이 들었습니다. 레이아웃도 사용할 수 있게 되었으므로, 우선의 디자인은 Material-UI 하나로 사이에 맞을 것 같습니다.



*추기 : Github에 Material-UI에서 Grid 레이아웃을 시도한 샘플 코드을 올렸습니다.