Sticky footer with CSS grid with an unknown number of children?
Sticky footers with
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
She also doesn't use a
display: flex; flex-direction: column; min-height: 100dvh;margin-block-start: auto;display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh;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;bodyShe also doesn't use a
mainmaindisplay: contentsFlems is a Playground for web development. Use it for examples, presentations, documentation, issues and what not.
Flems is a Playground for web development. Use it for examples, presentations, documentation, issues and what not.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
