【Bootstrap】グリッドシステムを入れ子で実現 #HTML

今回は皆さん、ご存知 Bootstrap についてです。

世界で最も人気の CSS フレームワーク。
この芸能界の次に入れ替わりが激しいと言われる ITの世界において、
CSS フレームワーク人気の王座に Bootstrap は、開発当初の 2011年から座り続けられておられます。

そして人気の大きな理由の一つにグリッドシステムがあります。
そうです、画面サイズによってウニャウニャする、あれです。
（画面を横幅のサイズごとに、12分割にし、指定した数字分の範囲を確保する仕組みですね。）

今回は確保した範囲内でさらに 12分割をする方法をご紹介します。
まず、画面を普段通りのやり方で 3分割にします。
画面を 3分割するには、全部で 12分割するうち 4分割分を確保すればOKですね。

bootstrap.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>

さぁ今回はさらに、この真ん中の白い部分を 3分割します。
まず、3分割したいブロック要素の中に、row クラスのブロック要素を記述します。

bootstrap.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
                <div class="row">
                </div>
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>

そして、さらに row クラスのブロック要素の中に 3分割したブロック要素を記述します。

bootstrap.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
                <div class="row">
                    <div class="col-4" style="background-color: yellow; height:100vh">
                    </div>
                    <div class="col-4" style="background-color: red; height:100vh">
                    </div>
                    <div class="col-4" style="background-color: black; height:100vh">
                    </div>
                </div>
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>

これで完了です。

じゃん！！！