Ejercicios de práctica de CSS

Ejercicio 18

Crea un diseño de página con un encabezado, contenido principal, barra lateral y pie de página utilizando CSS Grid.

Lo resolví del siguiente modo:

CSS:

                .container {
                    display: grid;
                    grid-template-columns: 1fr 3fr;
                    grid-template-rows: auto 1fr auto;
                    grid-template-areas:
                        "header header"
                        "sidebar main"
                        "footer footer";
                    gap: 10px;
                }

                header {
                    grid-area: header;
                    background-color: #333;
                    color: white;
                    text-align: center;
                    padding: 20px;
                }

                aside {
                    grid-area: sidebar;
                    background-color: #f4f4f4;
                    padding: 20px;
                }

                main {
                    grid-area: main;
                    background-color: #faf;
                    padding: 20px;
                }

                footer {
                    grid-area: footer;
                    background-color: #333;
                    color: white;
                    text-align: center;
                    padding: 10px;
                }
            

HTML:

                <div class="container">
                    <header>Encabezado</header>
                    <aside>Barra lateral</aside>
                    <main>Contenido principal</main>
                    <footer>Pie de página</footer>
                </div>