<div class="umb-block-grid"
     data-grid-columns="{{vm.gridColumns}}"
     style="--umb-block-grid--grid-columns: {{vm.gridColumns}};"
>
    
    <!-- Notice this is the same markup used everytime we will be printing a list of blocks: -->
    <div class="umb-block-grid__layout-container">

        <!-- repeat for each layout entry placed in the root of layout. -->
        <div
            class="umb-block-grid__layout-item"
            data-content-element-type-alias="{{layoutEntry.$block.content.contentTypeAlias}}"
            data-content-element-type-key="{{layoutEntry.$block.content.contentTypeKey}}"
            data-element-udi="{{layoutEntry.contentUdi}}"
            data-col-span="{{layoutEntry.columnSpan}}"
            data-row-span="{{layoutEntry.rowSpan}}"
            style="
            --umb-block-grid--item-column-span: {{layoutEntry.columnSpan}};
            --umb-block-grid--item-row-span: {{layoutEntry.rowSpan}};
            "
        >

            <div class="umb-block-grid__block--view" style="--umb-block-grid--area-grid-columns: {{ 'the-configured-amount' or 'inherited layout columns'}};">
                <!-- render razor view for this block. -->
                <!-- Razor view must handle/inject/ decide where the 'area-container' should be printed: -->
                <div class="umb-block-grid__area-container">

                    <!-- repeat for each area configured for this block type. -->
                    <div
                        class="umb-block-grid__area"
                        data-area-col-span="{{areaEntry.$config.columnSpan}}"
                        data-area-row-span="{{areaEntry.$config.rowSpan}}"
                        data-area-alias="{{areaEntry.$config.alias}}"
                        style="
                        --umb-block-grid--grid-columns: {{areaEntry.$config.columnSpan}};
                        --umb-block-grid--area-column-span: {{areaEntry.$config.columnSpan}};
                        --umb-block-grid--area-row-span: {{areaEntry.$config.rowSpan}};
                        ">

                            <!-- Notice here we print the same markup used everytime we will be printing a list of blocks(same as the one in the root of this document..):
                            <div class="umb-block-grid__layout-container">
                                ...
                            </div>
                            End of notice,  -->
                    </div>
                    <!-- end of repeat -->
                </div>

            </div>

        </div>
        <!-- end of repeat -->
        
    </div>

</div>