Foundation - Gridの使い方まとめ

Gridは、画面に表示する項目のレイアウトを設定する機能です。
画面全体の幅を12カラムに分割して、そのうちの◯カラム分の幅という風に指定します。

## 基本的な使い方

`row`クラスを設定した要素の下に`columns`クラスを配置します。

画面サイズが大きい場合、中くらい、小さい場合でそれぞれ`small-カラム数`  `medium-カラム数` `large-カラム数`というクラス名を設定し、併せて`columns`クラスを設定します。

```html
<div class="row">
  <div class="small-4 columns">...</div>
  <div class="small-4 columns">...</div>
  <div class="small-4 columns">...</div>
</div>
```

大きさの指定を組み合わせることで、画面サイズが大きい場合は4カラム分（画面全体の1/3）、小さい時は6カラム分（画面全体の1/2）といった指定の仕方ができます。

```html
<div class="row">
  <div class="large-4 small-6 columns">...</div>
  <div class="large-4 small-6 columns">...</div>
</div>
```

カラムのクラスは`columns`と`column`が用意されていますが、どちらも同じ動きをします。`small-1 columns`だと文法的におかしい。ということで、単数でも使えるようになっています

## ネスト

Gridをネストさせることができます。

```html
<div class="row">
  <div class="small-8 columns">8 cols
    <div class="row">
      <div class="small-8 columns">8 cols</div>
      <div class="small-4 columns">4 cols</div>
    </div>
  </div>
  <div class="small-4 columns">4 cols</div>
</div>
```

![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/67427/5639aa44-4b0b-7691-abe5-9989e66f0e68.jpeg)

## カラムの開始位置

`{size}-offset-{n}`クラスで、カラムの開始位置を指定できます。

```html
<div class="row">
  <div class="small-4 small-offset-2 columns">4 cols<br/>offset 2</div>
  <div class="small-3 small-offset-1 columns">3 cols<br/>offset 1</div>
  <div class="small-2 columns">2 cols<br/></div>
</div>
```

![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/67427/96f7972e-75c7-9808-a923-6864dcc5eb08.jpeg)

## 最終カラムが右に寄る

カラムの合計が12未満だと、1番右のカラムが右寄せになってしまいます。
`end`クラスを指定することで、右に寄らなくなります。

```html
<div class="row">
  <div class="small-6 columns">6 cols</div>
  <div class="small-4 columns">4 cols</div>
</div>

<div class="row">
  <div class="small-6 columns">6 cols</div>
  <div class="small-4 columns end">4 cols(end)</div>
</div>
```

![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/67427/c91c6808-698e-bca3-a7e5-355694ce6c04.jpeg)

## カラム間のすき間を詰める

`row`クラスの要素に`collapse`を指定することで、カラムとカラムの間を詰めることができます。
(padding-leftとpadding-rightが0になります)

```html
<div class="row uncollapse">
  <div class="small-6 columns">6 cols</div>
  <div class="small-6 columns">6 cols</div>
</div>

<div class="row collapse">
  <div class="small-6 columns">6 cols</div>
  <div class="small-6 columns">6 cols</div>
</div>
```

![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/67427/14268a0b-991b-3793-33fa-5519e9df3d4d.jpeg)

`small-collapse large-uncollapse`のように、画面サイズを指定することで、「大きい画面の場合はすき間を空けて、小さい画面の場合は間を詰める」といったこともできるようです(未確認)

## カラムの中央寄せ

`centered`クラスを指定するとカラムがセンタリングされます。
画面サイズを指定しないといけないようです。
大きな画面の場合にセンタリングさせない場合は`small-centered large-uncentered`のように指定します。

```html
<div class="row">
  <div class="small-6 small-centered columns">6 cols(centered)</div>
</div>
```

![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/67427/a0de8d67-3754-398b-eaba-a1a2c11112f5.jpeg)


## カラムの表示順

`push`、`pull`クラスで、カラムの表示順を入れ替えることができます。
`push`で右に移動、`pull`で左に移動します。
大きい画面と小さい画面でカラムの順番を変えたい時に使います。

```html
<div class="row">
  <div class="small-8 columns">8 cols</div>
  <div class="small-4 columns">4 cols</div>
</div>

<div class="row">
  <div class="small-8 small-push-4 columns">8 cols<br/>4 push</div>
  <div class="small-4 small-pull-8 columns">4 cols<br/>8 pull</div>
</div>
```

![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/67427/36f154e3-6745-f893-fd1c-ac741208b481.jpeg)

## 参照
http://foundation.zurb.com/docs/components/grid.html