Nesting Flexible columns

cos

#1

I’m wondering if there’s a way to nest Flexible columns in a template.

My use case is that I’d like to create a Page template that has a header, a footer and one big Flexible column in the middle.
I’d then create a reusable component that also contains one or more flexible columns.

Markup wise it could be something like

<!-- Outer Flexible column BEGIN -->
<div>
    <!-- Component BEGIN-->
    <div class="row">
        <div class="col-1-2">
            <!-- Inner Flexible column BEGIN -->
            <!-- InnerFlexible column END -->
        </div>
        <div class="col-1-2">                
            <!-- Inner Flexible column BEGIN -->
            <!-- InnerFlexible column END -->
        </div>
    </div>
    <!-- Component END-->

    <!-- Component BEGIN-->
    <div class="row">
        <div class="col-1-3">
            <!-- Inner Flexible column BEGIN -->
            <!-- InnerFlexible column END -->
        </div>
        <div class="col-1-3">                
            <!-- Inner Flexible column BEGIN -->
            <!-- InnerFlexible column END -->
        </div>
        <div class="col-1-3">                
            <!-- Inner Flexible column BEGIN -->
            <!-- InnerFlexible column END -->
        </div>
    </div>
    <!-- Component END-->
</div>
<!-- Outer Flexible column END -->

The result would be very flexible and I’d only need a handful of templates to cover a billion of different layouts.