Estructura básica de HTML5 con CSS Grid Layout

Maquetar páginas web con la propiedad Grid Layout ha facilitado en gran medida la construcción de estructuras flexibles desde las más simples a las más complejas escribiendo pocas líneas de código.

Como ejemplo vamos a montar una estructura básica de una página web.

HTML

				
					        <main class="wrapper">
            <header class="header">HEADER</header>
            <section class="content">CONTENT</section>
            <aside class="sidebar">SIDEBAR</aside>
            <footer class="footer">FOOTER</footer>
        </main>

CSS

				
					    .wrapper{
        height:500px;
        display:grid;
        grid-template-areas: 'header header'
                             'content sidebar'
                             'footer footer';
        grid-template-columns: auto 20%;
        grid-template-rows: 25% 50% 25%;
      }
      
      section,
      header,
      aside,
      footer{
        border:1px solid #ccc;
        background:#eee;
        padding:20px;
        text-align:center;
        font-family: Arial;
        display:flex;
        justify-content:center;
        align-items:center;
      }

Para el post he simplificado el código del estilo en CSS pero puedes verlo también en SCSS dentro de mi repositorio de Github y también una demo en Github Pages.

Facebook
Twitter
LinkedIn

Nuevas/ publicaciones

ir al blog

Nuevas/ publicaciones