I got a layout that is two columns where the right column will contain some text and a header. The header should also have the possibility to either remain in its column or span across both columns and I'm using grid-stacking to achieve this.
However, I run in to a problem where the content in the right column and the heading isn't respecting each others boundries like with absolute. What I'm doing now is subtracting the height of the text-container from the content container, but I'm wondering if there's a better approach for this type of layout?
Don't mind the magic numbering its just to show the idea, I would use a more dynamic approach if needed.
What I have so far:
body { height: 100vh;}.grid-container { display: grid; grid-template-columns: 1fr 1fr; height: 100%; outline: 2px solid blue;}.flex-parent { display: flex; grid-column: -1 / 1; grid-row: -1 / 1;}.left { flex-basis: 100%; background: red;}.right { flex-basis: 100%; background: yellow; box-sixing: border-box;}.right__inner { display: flex; height: calc(100% - 100px); align-items: flex-end;}.text-container { grid-column: -1 / 1; grid-row: -1 / 1; align-self: end; opacity: 0.8; background: white;}<div class="grid-container"><div class="flex-parent"><div class="left"></div><div class="right"><div class="right__inner"><p>Hello this is some text</p></div></div></div><div class="text-container"><h1>Heading</h1></div></div>