Tab Grid Layout

Tab.html

<style>
    .sfPageContainer .tab-pane {
        display: block !important
    }
</style>

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" data-sf-element="Tab-1" data-toggle="tab" href="#tab1Content" role="tab" aria-controls="tab1Content" aria-selected="true">
            <div class="sf_colsIn" data-sf-element="Tab-1-Title" data-placeholder-label="Tab 1 Title"></div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-sf-element="Tab-2" data-toggle="tab" href="#tab2Content" role="tab" aria-controls="tab2Content" aria-selected="false">
            <div class="sf_colsIn" data-sf-element="Tab-2-Title" data-placeholder-label="Tab 2 Title"></div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-sf-element="Tab-3" data-toggle="tab" href="#tab3Content" role="tab" aria-controls="tab3Content" aria-selected="false">
            <div class="sf_colsIn" data-sf-element="Tab-3-Title" data-placeholder-label="Tab 3 Title"></div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link d-none" data-sf-element="Tab-4" data-toggle="tab" href="#tab4Content" role="tab" aria-controls="tab4Content" aria-selected="false">
            <div class="sf_colsIn" data-sf-element="Tab-4-Title" data-placeholder-label="Tab 4 Title"></div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link d-none" data-sf-element="Tab-5" data-toggle="tab" href="#tab5Content" role="tab" aria-controls="tab5Content" aria-selected="false">
            <div class="sf_colsIn" data-sf-element="Tab-5-Title" data-placeholder-label="Tab 5 Title"></div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link d-none" data-sf-element="Tab-6" data-toggle="tab" href="#tab6Content" role="tab" aria-controls="tab6Content" aria-selected="false">
            <div class="sf_colsIn" data-sf-element="Tab-6-Title" data-placeholder-label="Tab 6 Title"></div>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link d-none" data-sf-element="Tab-7" data-toggle="tab" href="#tab7Content" role="tab" aria-controls="tab7Content" aria-selected="false">
            <div class="sf_colsIn" data-sf-element="Tab-7-Title" data-placeholder-label="Tab 7 Title"></div>
        </a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1Content" role="tabpanel" aria-labelledby="tab1">
        <div class="sf_colsIn" data-sf-element="Tab-1-Content" data-placeholder-label="Tab 1 Content"></div>
    </div>
    <div class="tab-pane" id="tab2Content" role="tabpanel" aria-labelledby="tab2">
        <div class="sf_colsIn" data-sf-element="Tab-2-Content" data-placeholder-label="Tab 2 Content"></div>
    </div>
    <div class="tab-pane" id="tab3Content" role="tabpanel" aria-labelledby="tab3">
        <div class="sf_colsIn" data-sf-element="Tab-3-Content" data-placeholder-label="Tab 3 Content"></div>
    </div>
    <div class="tab-pane" id="tab4Content" role="tabpanel" aria-labelledby="tab4">
        <div class="sf_colsIn d-none" data-sf-element="Tab-4-Content" data-placeholder-label="Tab 4 Content"></div>
    </div>
    <div class="tab-pane" id="tab5Content" role="tabpanel" aria-labelledby="tab5">
        <div class="sf_colsIn d-none" data-sf-element="Tab-5-Content" data-placeholder-label="Tab 5 Content"></div>
    </div>
    <div class="tab-pane" id="tab6Content" role="tabpanel" aria-labelledby="tab6">
        <div class="sf_colsIn d-none" data-sf-element="Tab-6-Content" data-placeholder-label="Tab 6 Content"></div>
    </div>
    <div class="tab-pane" id="tab7Content" role="tabpanel" aria-labelledby="tab7">
        <div class="sf_colsIn d-none" data-sf-element="Tab-7-Content" data-placeholder-label="Tab 7 Content"></div>
    </div>
</div>