CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Holy grail

<div style="
    display: flex;
    flex-direction: column;
">
    <header>
        ...
    </header>
    <main style="
        /* Take the remaining height */
        flex-grow: 1;

        /* Layout the left sidebar, main content and right sidebar */
        display: flex;
        flex-direction: row;
    ">
        <!-- Left sidebar -->
        <aside style="
            width: 25%;
        ">...</aside>

        <!-- Main content -->
        <article style="
            /* Take the remaining width */
            flex-grow: 1;
        ">
            ...
        </article>

        <!-- Right sidebar -->
        <nav style="
            width: 20%;
        ">...</nav>
    </main>
    <footer>
        ...
    </footer>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!