BootStrapの使用方法②　グリッドシステムについて

本記事ではBootStrapのグリッドシステムについてまとめていきます。

**グリッドシステム**
…レイアウトを格子状にして配置するデザイン方法。コンテナ・行・列を使用して要素を整列させます。
　画面サイズが異なるデバイスでも柔軟に表示が可能です。
 　列数は１２を基準とし、列の幅の数字は一列で１２となるように設定する。

  この最後の行の説明については、コーディングしながら確認していきましょう。

bodyタグ内に下記のソースコードを差し込みます。
```html
<div class="container">
      <div class="row">
        <div class="col">test1</div>
        <div class="col">test2</div>
        <div class="col">test3</div>
      </div>
    </div>
```

ソースコード全体としては下記のようになります。
```html:gridsystem.html
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GridSystemについて</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <style>
        .col {
          background-color: coral;
          border: black 1px solid;
        }
      </style>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col">test1</div>
        <div class="col">test2</div>
        <div class="col">test3</div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"></script>
  </body>

</html>
```

画面はこのようになります。
コンテナ内が三等分されているのが分かります。
「col」をクラスに設定することで、親要素を３等分するようにdivを配置することができます。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/b6dc611a-c372-6bbd-37c5-92e58ee1e9a4.png)

--------------------------------------------------------------------------

最初、「列数は１２を基準とし、列の幅の数字は一列で１２となるように設定する。」と述べましたが
改めてこちらについて説明します。
bodyタグの中身をこちらに入れ替えて画面を確認します。

```html
    <div class="container">
      <div class="row">
        <div class="col-1">1</div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
        <div class="col-1"></div>
      </div>
      <div class="row">
        <div class="col-2">2</div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
        <div class="col-2"></div>
      </div>
      <div class="row">
        <div class="col-3">3</div>
        <div class="col-3"></div>
        <div class="col-3"></div>
        <div class="col-3"></div>
      </div>
      <div class="row">
        <div class="col-4">4</div>
        <div class="col-4"></div>
        <div class="col-4"></div>
      </div>
      <div class="row">
        <div class="col-6">6</div>
        <div class="col-6"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
      crossorigin="anonymous"></script>
  </body>
```

画面は下記のように表示されます。
このように、親要素のコンテナ（container）を均等に分けて配置することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/e0959f76-231e-5579-1dc3-14990c7c23cb.png)

ゆえにクラス「col-」の数字部分が合計12になるように設定する必要があります。

**グリッドオプション**
…異なるデバイスや画面サイズに対応するための設定のこと。

**ブレークポイント**
Extra small (xs): <576px
Small (sm): ≥576px
Medium (md): ≥768px
Large (lg): ≥992px
Extra large (xl): ≥1200px
Extra extra large (xxl): ≥1400px

上記のブレークポイントを使用することで様々なデバイス（PC、スマホ、タブレット）に対して適切なレイアウトを提供できます。

今回の例では「Medium」「Large」の画面サイズでレイアウトを設定してみます。

```html:gridsystem.html
    <div class="container">
      <div class="row">
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
        <div class="col-lg-1 col-md-3">test</div>
      </div>
    </div>
```
画面サイズが992px以下（lg）である場合は、下記のように1つの要素が１行で配置されるようになり、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/e53d6ea2-c3ad-a618-a0b7-0371e8004c03.png)

画面サイズが768px以下（md）である場合は、下記のように３行で配置されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/26e72f7b-6cae-ff13-f997-88e28ea4697f.png)

このように画面サイズによってレイアウトの変更ができるため、様々なデバイスでの画面表示が容易になります。

----------------------------------------------------------------

**ネスト**
…BootStrapのグリッドシステムにおいて、要素のレイアウトを設定する際に
ネスト（入れ子型）の構造にすることができます。


分かりづらいかもしれませんが、
まずcol-lg-8クラスの要素と、col-lg-4クラスの要素を作成し
col-lg-8クラスの要素内に row、col-lg-3、col-lg-9の要素を作成します。
（※この部分が入れ子構造になっています。）
```html
    <div class="container">
      <div class="row">
        <div class="col-lg-8">test
          <div class="row">
            <div class="col-lg-3">test-sub</div>
            <div class="col-lg-9">test-sub</div>
          </div>
        </div>
        <div class="col-lg-4">test
        </div>
      </div>
    </div>
```

画面で確認するとこのようになります。
12分の8、12分の４でまず分けられており、
12分の8部分の要素がネストされているのでその要素が
12分の3と12分の9に分けられているといった構造になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/86b15136-1a0c-73cd-30ac-86366102b146.png)

このようにネストを用いることでイレギュラーなレイアウトにも対応することができます。