プログラミングBlog

トップ > Bootstrap > BootStrapのGridLayout

BootStrapのGridLayout

Bootstrap 勉強会 LT

GridLayoutとは？？

  • Grid・・・格子状のもの、方眼紙。
  • Layout・・・何をどこに配置するかの割り付けのこと。
  • GridLayoutは格子状のものに、例えばボタンやデザインを配置することを言います。

今回使用したBootStrapのGridLayoutのクラス説明

名前 説明
container Gridコンテナを作成。横幅が固定となるため、余白が生まれる。
container-fluid Gridコンテナを作成。横幅が可変となるため余白なし。
row 行
col 列
col-offset-1 1Grid分のスペースを空ける。

Bootstrap、GridLayoutのレスポンシブ対応

ブラウザ、タブレット、スマホなどの画面の大きさごとにレスポンシブ対応がされるようになっています。
各ブレークポイント(画面のサイズ)ごとのcontainerとcontainer-fluidの違い。
fluidの場合はwidth100%が指定されるため余白なしで流動的に変化していきます。
getbootstrap.jp

Bootstrap、GridLayoutの特徴

  • 基本は横幅を12分割。
  • レスポンシブ対応

ハンズオン

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <!-- 固定幅 -->
    <div class="container">
        <div class="row">
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
    <!-- 可変幅 -->
    <div class="container-fluid">
        <div class="row">
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
    <!-- 2分割分のスペース。 -->
    <div class="container">
        <div class="row">
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 offset-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
    <!-- 2分割を12分割 -->
    <div class="container">
        <div class="row">
            <div class="col-2 bg-success">
                <div class="row">
                    <div class="col-2 bg-success">layout2</div>
                    <div class="col-2 bg-danger">layout2</div>
                    <div class="col-2 bg-success">layout2</div>
                    <div class="col-2 bg-danger">layout2</div>
                    <div class="col-2 bg-success">layout2</div>
                    <div class="col-2 bg-danger">layout2</div>
                </div>
            </div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
            <div class="col-2 bg-success">layout2</div>
            <div class="col-2 bg-danger">layout2</div>
        </div>
    </div>
</body>

</html>

一番最後は応用で、2分割した列をさらに12分割しています。
Gridの分割数によっては独自のCssを定義してあげないと実装できない場合もある。

参考サイト

Layout saruwakakun.com GridLayout ferret-plus.com