How can I setup a responsive grid with columns with many rows and a stretching one?

[sturlath]

I'm trying to play with the Grid and trying setup components like the green boxes in the picture below and trying to keep the page responsive.

This is probably super easy (for somebody else) so sorry for that ;-)

[sturlath]

Ok now I basically just need the last one to the right to "span" down to the bottom.. damn I suck at CSS :-)

[sturlath]

Something like this here #2188 but I'm only using Rows and Columns not DataGrid

This is what I got now

        <Row>
            <Column ColumnSize="ColumnSize.Is4.OnDesktop">
                <Validation>
                    <Field>
                        <FieldLabel>Label text</FieldLabel>
                        <TextEdit @bind-Text="@NewStreamEvent.Name">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </Field>
                </Validation>
                <Validation>
                    <Field>
                        <FieldLabel>Discription</FieldLabel>
                        <MemoEdit Rows="5" @bind-Text="@NewStreamEvent.Description">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </MemoEdit>
                    </Field>
                </Validation>
            </Column>
            <Column ColumnSize="ColumnSize.Is3.OnDesktop">
                <Validation>
                    <Field>
                        <FieldLabel>Label text</FieldLabel>
                        <TextEdit @bind-Text="@NewStreamEvent.Name">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </Field>
                </Validation>
                <Validation>
                    <Field>
                        <FieldLabel>Label text</FieldLabel>
                        <TextEdit @bind-Text="@NewStreamEvent.Name">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </Field>
                </Validation>
                <Validation>
                    <Field>
                        <FieldLabel>Label text</FieldLabel>
                        <TextEdit @bind-Text="@NewStreamEvent.Name">
                            <Feedback>
                                <ValidationError />
                            </Feedback>
                        </TextEdit>
                    </Field>
                </Validation>
            </Column>
            <Column ColumnSize="ColumnSize.Is5.OnDesktop">
                <Container>
                    <Alert Color="Color.Primary" Visible="true">
                         Some text
                    </Alert>
                </Container>
            </Column>
        </Row>

looking like

[stsrki]

I would just do <Column ColumnSize="ColumnSize.Is5.OnDesktop" Style="height: 400px;"> for the last column.

[sturlath]

Awesome worked like a charm! Thanks for the answer and sorry for the question ;-)

[stsrki]

No problem. You did all the work anyways ;)