How do I get a lightning card to expand to the size of the enclosing layout item?

Question

I have HTML that looks like this:

<template>
    <lightning-layout size="12"
                        multiple-rows="true"
                        vertical-align="stretch"
                        class="container-layout">
        <lightning-layout-item flexibility="auto"
                                padding="around-small"
                                class="top-row"
                                size="7">
            <lightning-card title="Prospects">
                1
            </lightning-card>
        </lightning-layout-item>
        <lightning-layout-item flexibility="auto"
                                padding="around-small"
                                class="top-row"
                                size="5">
            <lightning-card title="Prospect Detail">
                2
            </lightning-card>
        </lightning-layout-item>
        <lightning-layout-item flexibility="auto"
                                padding="around-small"
                                class="bottom-row"
                                size="7">
            <lightning-card>
                <lightning-tabset>
                    <lightning-tab label="To Do">
                        tasks
                    </lightning-tab>
                    <lightning-tab label="My Schedule">
                        schedule
                    </lightning-tab>
                    <lightning-tab label="My Stats">
                        stats
                    </lightning-tab>
                </lightning-tabset>
            </lightning-card>
        </lightning-layout-item>
        <lightning-layout-item flexibility="auto"
                                padding="around-small"
                                class="bottom-row"
                                size="5">
            <lightning-card>
                <lightning-tabset>
                    <lightning-tab label="Chatter">
                        chatter
                    </lightning-tab>
                    <lightning-tab label="Activity">
                        activity
                    </lightning-tab>
                </lightning-tabset>
            </lightning-card>
        </lightning-layout-item>
    </lightning-layout>
</template>

Here's the current CSS:

.large {
    height: 200px;
}

.container-layout {
    height: 80vh;
}

.custom-box {
    text-align: center;
    background-color: #f4f6f9;
    padding: 1rem;
    border: 1px solid #d8dde6;
}

.top-row {
    height: 70%;
}

.bottom-row {
    height: 30%;
}

lightning-card {
    height: auto;
    max-height: 100%;
}

It produces the following rendered page:

What I'd like is for the tab groups and lightning cards to take the full vertical size of the enclosing layout items. How can I do this?

Answer 1

You can use lightning-grid here.

I created this sample component for what you need and you can insert lightning-card in each grid like I have done for 1st and 2nd column.

https://webcomponents.dev/edit/XdVtgPF8S9or38o0F3vk

Try this...

https://webcomponents.dev/edit/XdVtgPF8S9or38o0F3vk/src/app.html

Answer 2

I ended up using vanilla CSS grids.

<template>
    <div class="major-grid">
        <div class="top-left slds-theme_default">
            <div class="top-left-header">
                <h1>Prospects</h1>
            </div>
            <div>
                <c-new-opps-header></c-new-opps-header>
            </div>
            <div>
                <c-new-opps-datatable></c-new-opps-datatable>
            </div>
            <div>
                <c-new-opps-header></c-new-opps-header>
            </div>
            <div>
                <c-new-opps-datatable></c-new-opps-datatable>
            </div>
        </div>
        <div class="top-right slds-theme_default">

        </div>
        <div class="bottom-left slds-theme_default">

        </div>
        <div class="bottom-right slds-theme_default">

        </div>
    </div>
</template>

h1 {
    font-weight: bold;
}

.major-grid {
    display: grid;
    height: 80vh;
    margin-right: 10px;
    grid-template-rows: 70% 30%;
    grid-template-columns: 70% 30%;
    grid-gap: 10px;
}

.top-left {
    display: grid;
    height: 100%;
    grid-template-rows: 4% 10% 39% 49%;
    grid-template-columns: 100%;
}