How to define exact place where component dropped?

Question

I use Grapesjs and I have 'about us' block on my page. I want to make this block editable with Grapesjs. So there is the container and child items with photo and description. My understanding is the following: Grapesjs block should represent the container, and Grapes component should represent single child card. And then I want to put child items to block.

Here is the html structure of container and childs:

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <h2>Über uns</h2>
        </div>

        <div class="about-wrap">
            <div class="about-line">
                <div class="about-itm">
                    <div class="about-itm-inner">
                        <a href="#" class="about-itm-photo">
                            <span class="img-inner-box" style="background-image: url(/img/about/1.png);">
                                <img src="/css/img/square.png" alt="base">
                                <img class="main-img" src="/img/about/1.png" alt="" title="">
                            </span>
                        </a>

                        <div class="about-itm-txt">
                            <div class="about-itm-name">Andrea</div>
                            <div class="about-itm-brief">
                                Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

This in my opinion should be html of Grapesjs block (container):

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <h2>Über uns</h2>
        </div>

        <div class="about-wrap">
            <div class="about-line">

            </div>
        </div>
    </div>
</section>

And this in my opinion should be the Grapesjs component html (child card):

<div class="about-itm">
    <div class="about-itm-inner">
        <a href="#" class="about-itm-photo">
                        <span class="img-inner-box" style="background-image: url(/img/about/1.png);">
                            <img src="/css/img/square.png" alt="base">
                            <img class="main-img" src="/img/about/1.png" alt="" title="">
                        </span>
        </a>

        <div class="about-itm-txt">
            <div class="about-itm-name">Andrea</div>
            <div class="about-itm-brief">
                Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>
            </div>
        </div>
    </div>
</div>

Here is the JS code:

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: 1,
    storageManager: { type: 0 },
    // plugins: [myNewComponentTypes],
    // plugins: ['gjs-blocks-basic']
});

let blockManager = editor.BlockManager;


editor.Components.addType('about-us-item',
    {
        isComponent: el => el.className && el.className.split(' ').includes('about-us-item'),

        // Model definition
        model: {
            // Default properties
            defaults: {
                tagName: 'section',
                // draggable: 'form, form *', // Can be dropped only inside `form` elements
                draggable: false,
                droppable: false, // Can't drop other elements inside
            }
        }
    });

blockManager.add('about-us-item',
    {
        label: 'About us',
        attributes: {class:'fa fa-user-circle-o'},
        content: '<div class="about-itm">' +
            '<div class="about-itm-inner">' +
            '<a href="#" class="about-itm-photo">\n' +
            '<span class="img-inner-box" style="background-image: url(/img/about/1.png);">' +
            '<img src="/css/img/square.png" alt="base">' +
            '<img class="main-img" src="/img/about/1.png" alt="" title="">' +
            '</span>' +
            '</a>' +
            '<div class="about-itm-txt">' +
            '<div class="about-itm-name">Andrea</div>' +
            '<div class="about-itm-brief">' +
            'Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>',
        category: 'Items',
    });

blockManager.add('about-us-container', {
    label: 'About us',
    attributes: {class:'fa fa-cube'},
    content: '<section class="sect-home-about">' +
        '    <div class="container">' +
        '        <div class="title-sect">' +
        '            <h2>Über uns</h2>' +
        '        </div>' +
        '        <div class="about-wrap">' +
        '            <div class="about-line">' +
        '            </div>' +
        '        </div>' +
        '    </div>' +
        '</section>',
    category: 'Containers',
});

Here is the screenshot how it looks like:

So I want firstly put 'About us' container to the canvas, and then fill the container with 'About us' items.

And here is the final problem:

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <div class="about-itm">
                <div class="about-itm-inner"><a href="#" class="about-itm-photo"><span class="img-inner-box" id="iijxe"><img
                        src="/css/img/square.png" alt="base"/><img src="/img/about/1.png" alt="" title=""
                                                                   class="main-img"/></span></a>
                    <div class="about-itm-txt">
                        <div class="about-itm-name">Andrea</div>
                        <div class="about-itm-brief">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und
                            Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a></div>
                    </div>
                </div>
            </div>
            <h2>Über uns</h2></div>
        <div class="about-wrap">
            <div class="about-line"></div>
        </div>
    </div>
</section>

I want .about-itm items to be placed inside .about-line div, but they appear inside .title-sect

Thank you all guys who can help and clarify this moment!

I have added padding to .about-line div, so now it is easly to put chilt to right place:

blockManager.add('about-us-container', {
    label: 'About us',
    attributes: {class:'fa fa-cube'},
    content: '<section class="sect-home-about">' +
        '    <div class="container">' +
        '        <div class="title-sect">' +
        '            <h2>Über uns</h2>' +
        '        </div>' +
        '        <div class="about-wrap">' +
        '            <div class="about-line" style="padding-top: 50px;"></div>' +
        '        </div>' +
        '    </div>' +
        '</section>',
    category: 'Containers',
});

But I want that only inside .about-line div possible to put item.