Grid

Materializeでは行(row)と列(col)の構造でレイアウトを構築できます。これをグリッドレイアウトと呼びます。Materializeのグリッドでは、水平方向を12分割しています。

Breakpoint

CSSフレームワークでは、画面の大きさによってレイアウトを切り替えることができます。これをブレークポイントと呼びます。

Materializeには4つのブレークポイントがあります。

Materializeのブレークポイント
デバイス クラスの接頭辞 画面の横幅 コンテナの幅 列の数
スマホ s 600px 以下 90% 12
タブレット m 600px 超 85% 12
ノートパソコン l 992px 超 70% 12
デスクトップパソコン xl 1200px 超 70% 12

1カラムレイアウト

<div class="row">
  <div class="col s12">.col .s12</div>
</div>
.col .s12

2カラムレイアウト

.s1~.s11の範囲で列の幅を指定できる。

6:6

<div class="row">
  <div class="col s6">.col .s6</div>
  <div class="col s6">.col .s6</div>
</div>
.col .s6
.col .s6

4:8

<div class="row">
  <div class="col s4">.col .s4</div>
  <div class="col s8">.col .s8</div>
</div>
.col .s4
.col .s8

2:10

<div class="row">
  <div class="col s2">.col .s2</div>
  <div class="col s10">.col .s10</div>
</div>
.col .s2
.col .s10

3カラムレイアウト

4:4:4

<div class="row">
  <div class="col s4">.col .s4</div>
  <div class="col s4">.col .s4</div>
  <div class="col s4">.col .s4</div>
</div>
.col .s4
.col .s4
.col .s4