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.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Share on twitter
Share on linkedin

Nuevas/ publicaciones

Nuevas/ publicaciones

📢 Paginación con scroll infinito en Posts de Elementor 🔗 https://martagonzalez.dev/blog/paginacion-con-scroll-infinito-en-posts-de-elementor/ #webdev #playground #code #frontend #dev #webdev #developerlife #wordpress #elementor #cms #codingdays #development #frontenddev
Diseño tarjeta de visita #taxi #taxidriver #barcelona #tarjetadepresentacion #printdesign #taxibarcelona #graphicdesign #design #visitbarcelona #diseñografico #businesscards #branding #brandidentity
Move By Bike Landing - 2022 - Proyecto experimental Desarrollo de una landing page para promover el uso de la bicicleta como medio de transporte mediante una aplicación de pagina única hecha con #Angular y estilada con #SCSS. El diseño es de #Freepik. 🔗https://martagonzalez.dev/playground/by-bike-landing/ #webdev #playground #code #bybike #landing #frontend #developerlife #coding #angulardeveloper #codingdays #development #frontenddev #womenwhocode #tech #webdeveloper #codinglife
Hola mundo! 👋 Soy Marta González y me dedico al desarrollo front-end. Tengo estudios de multimedia, administración de sistemas y desarrollo de aplicaciones informáticas. Trabajo asiduamente con lenguajes #HTML5, #CSS3 y #JavaScript.  Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos rápidamente. #webdev #code #frontend #aboutme #developerlife #codingdays #development #programmer #womeninstem #frontenddev #webdeveloper #developer #code #techcommunity #devgirls #womenwhocode #coding #codepeople #womwnintech
Aplicación #CRUD de notas y registro de usuarios con #NodeJS #MongoDB #webdev #code #developer #playground #developerslife #codeislife #tech #codingdays #development
Pet Shop Landing - 2021 - Experimental #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #developerlife #tech #development #adoptdontshop #coding
📢 Aplicaciones de página única (SPA) 🔗 https://martagonzalez.dev/aplicaciones-de-pagina-unica-spa/ #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #spa #angular #react #vue #nodejs #javascript
To-Do con #ReactJS - 2021 #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev