Problems with Grid, Row and Cols

How can I implement the following grid with Bootstrap?

I would like to be able to use the cols in such a way that I have a large col and several small cols of the same size (e.g. 6,3,3 or 4,2,2,2, etc.) The small cols should be exactly half as high as the large col, so that there is room for two rows of the small cols.

How do I get that cleanly with Bootstrap? All my attempts have brought no success.

Something like this:

 <div class="container">
        <div class="row">
            <div class="col-md-6">html for main block here</div>
            <div class="col-md-6">
                <div class="row row-cols-2 gy-3">
                    <div class="col">html for small block here</div>
                    <div class="col">html for small block here</div>
                    <div class="col">html for small block here</div>
                    <div class="col">html for small block here</div>
                </div>
            </div>
        </div>
    </div>

you would have to play around with the alignment, but this gives you the rough framework

Ok, thank you… Looks good. And how i can make the gutter smaller? how i can use g-1 oder g-2 for all Paddings inside the grid?

yes, but you might find it easier in the long run to turn off the row gutters and add to the individual blocks. chances are you are going to have to put a div in each column to get the styling right, so your code might look something like this:

<div class="container">

        <div class="row g-0">

            <div class="col-md-6"><div class="yourmainblockclass">Contents Main</div></div>

            <div class="col-md-6">

                <div class="row g-0 row-cols-1 row-cols-md-2">

                    <div class="col"><div class="yourblockclass">Contents 1</div></div>

                    <div class="col"><div class="yourblockclass">Contents 2</div></div>

                    <div class="col"><div class="yourblockclass">Contents 3</div></div>

                    <div class="col"><div class="yourblockclass">Contents 4</div></div>

                </div>

            </div>

        </div>

    </div>

I’ve also changed the classes for the second row so goes to full width on mobile