Use subgrid in child element

I have a grid. It has 3 rows.
Row 1: Header
Row 2: Content
Row 3: Block element

The content from row 2 has a background image that should cover the entire grid container.
The text from the content block should only be in the Content row.

I wanted to implement this with a subgrid. The content block is nested, the subgrid is not a direct child element.

How can I pass on the grid properties from the parent element to nested child elements? Is that possible?

Is there a better way to implement this?

Code example:

        <div class="grid">
            <div class="elementA"></div>
            <div class="elementB">
                <div>
                    <div>
                        <div class="subgrid">
                            <span>Test Subgrid</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="elementC"></div>
        </div>

        <div class="grid">
            <div class="elementA"></div>
            <div class="elementB">
                <div>
                    <div>
                        <div class="subgrid">
                            <span>Test Subgrid</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="elementC"></div>
        </div>

KP-C

Kevin Powell - Community•3y ago

ausdemgemueseregal

Use subgrid in child element

        <div class="grid">
            <div class="elementA"></div>
            <div class="elementB">
                <div>
                    <div>
                        <div class="subgrid">
                            <span>Test Subgrid</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="elementC"></div>
        </div>

        <div class="grid">
            <div class="elementA"></div>
            <div class="elementB">
                <div>
                    <div>
                        <div class="subgrid">
                            <span>Test Subgrid</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="elementC"></div>
        </div>

Use subgrid in child element

Similar Threads

Use subgrid in child element

Similar Threads

Similar Threads

Similar Threads