Sticky footer with CSS grid with an unknown number of children?
Sticky footers with
display: flex; flex-direction: column; min-height: 100dvh; on the body and a bottom element with margin-block-start: auto; are well known. From time to time, one also sees css grid used, for example with display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; on the body to allow the main section to expand between native height header and footer elements. See this simple flems.io code example [a short-link to stay within discord's post length limit].
Is there a way of doing this with CSS grid when you don't know how many elements there are between the header and footer? As in, for example, this expanded flems.io code sample [short-link] with an additional breadcrumb nav and pre-footer div added to the mix.
The background: I was experimenting with Ana Tudor's Super Simple Full-Bleed & Breakout Styles as an interesting means of potentially dispensing with wrapper containers inside full-width elements. Her example is long, and she sets display: grid; on the body tag, which means using display: flex to achieve a sticky footer is not an option without wrapping the entire page in an additional wrapper div.
She also doesn't use a main tag to wrap her content, so there are numerous elements between the top and bottom. There was a reason for that, as adding a main wrapper to hold the content breaks her concept unless you set it to display: contents, which allows css to 'see through it' and act on the numerous child elements. This creates the situation described above with an unknown number of elements between the top and bottom of a page.5 Replies
i was playing with this, and think i found a solution. It is a bit trickery though. It will not work if you want to use gaps. (and maybe there are other scenarios that it will behave differently)
It is creating a lot of template-rows (auto) and the last one 1fr. so now we can assign the footer to the last row (-1). unoccopied template-rows fill up the remainder
Thanks @MarkBoots! I did experiment with repeat and
auto-fill and auto-fit variants, and also using max-content but did not succeed (I guess because auto-fill/-fit need to work with the entire space and can't have following or preceding items?).
Your variant does work. It needs some slight adjustment if the pre-footer should also sit above the footer, but then works if you add further elements above main such as a banner or hero element: see this test case on flems.io.glad it works out for you
FWIW: I'm not sure whether adding
display: contents; to the main wrapper is a good strategy, or whether that might create new problems further down the line. By effectively turning the main element into a pass-thru element for CSS, it allows Ana Tudor's full-bleed approach to act on the children. This is a bare-bones example of this approach, as discussed above.
I did also achieve the same result by effectively nesting Ana Tudor's approach into a full-width main element. The main element does then exist to CSS and her full-bleed approaches works within that. This is a bare-bones example of the 'nested' bleed variant.i use display: content to keep things organized while within the same layout. there are some caviats sometimes (cant think of one right now), so yea, be careful with it