CSS Layouts and Patterns

Note

Classes / element names are all interchangeable of course. I’ll be defaulting to tag names for simplicity.

Nav at top, Footer at bottom, flexible content §

<div class="grid grid-rows-[auto_1fr] h-screen">
    <nav><!-- This will occupy as much space it wants --></nav>
    <main class="h-full">
        <!-- This will occupy the remaining space,
        and its children can use height with % values -->
    </main>
</div