如何使用bootstrap css创建复杂的砌体布局

Question

我正在尝试创建一个类似于特定Power Point幻灯片的网页：

我试图使用这种方法，但没有取得多大成功：

<div class="container">

    <div id="grids">
        <div>
            <div class="row col-sm-12">
                <div class="graybox col-sm-12" id="1" style="min-height: 50px;"></div>

            </div>

            <div class="row col-sm-12">
            <div class="graybox col-sm-3" id="7" style="min-height: 120px;"></div>
                <div class="graybox col-sm-1" style="min-height: 58px;"></div>


                    <div class="graybox col-sm-1" id="9.0" style="min-height: 20px;"></div>
                    <div class="graybox col-sm-1" id="9.1" style="min-height: 20px;"></div>
                    <div class="graybox col-sm-3" id="9.2" style="min-height: 20px;"></div>
                    <div class="graybox col-sm-3" id="9.3" style="min-height: 120px;"></div>
            </div>
            <div class="row col-sm-12">
                <div class="graybox col-sm-1 col-sm-offset-3" id="12" style="min-height: 50px;"></div>
                <div class="row col-sm-12">
                    <div class="graybox col-sm-1" id="15" style="min-height: 50px;"></div>
                    <div class="graybox col-sm-1" id="16" style="min-height: 50px;"></div>
                    <div class="graybox col-sm-6" id="17" style="min-height: 50px;"></div>
                </div>
            </div>
        </div>

    </div>
</div>

有人知道这种类型的布局是否可以使用bootstrap或css的其他应用程序？