<div class="container">
    <header class="header">
        <p>Questo &egrave; l'header del mio nuovo layout</p>
    </header>
    <section class="articoli">
        <article>
            <header>
                <h2>Inseriamo un articolo</h2>
            </header>
            <div class="contenuto">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic a quia quo voluptates voluptatem illo voluptas sed. Aliquam corporis, sint quia nam consequuntur ullam id repudiandae possimus repellat neque eligendi.</p>
            </div>
            <footer>
                <small>Piccole informazioni</small>
            </footer>
        </article>

        <article>
            <header>
                <h2>Inseriamo un articolo</h2>
            </header>
            <div class="contenuto">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic a quia quo voluptates voluptatem illo voluptas sed. Aliquam corporis, sint quia nam consequuntur ullam id repudiandae possimus repellat neque eligendi.</p>
            </div>
            <footer>
                <small>Piccole informazioni</small>
            </footer>
        </article>

        <article>
            <header>
                <h2>Inseriamo un articolo</h2>
            </header>
            <div class="contenuto">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic a quia quo voluptates voluptatem illo voluptas sed. Aliquam corporis, sint quia nam consequuntur ullam id repudiandae possimus repellat neque eligendi.</p>
            </div>
            <footer>
                <small>Piccole informazioni</small>
            </footer>
        </article>
    </section>
    <aside>
        <div class="widget">Area 1</div>
        <div class="widget">Area 2</div>
        <div class="widget">Area 3</div>
    </aside>
    <footer class="footer">
        <small>chiudiamo il tutto</small>
    </footer>
</div>
.container{
    display: grid;
    grid-template-rows: 150px auto 150px;
    grid-template-columns: 25% 75%;
    grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header{
    grid-area: header;
    background-color: #FF9379;
}

.articoli{
    grid-area: content;
    background-color: #9EA4FF;
}

aside{
    grid-area: sidebar;
    background-color: #7AE464;
}

.footer{
    grid-area: footer;
    background-color: #FFFB7C;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.