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.
La propiedad Grid Layout de CSS ha transformado la forma en que creamos diseños web. Desde su introducción, ha facilitado la construcción de layouts complejos y flexibles con muy poco código. Gracias a su enfoque basado en filas y columnas, esta propiedad ofrece un control preciso sobre la disposición de los elementos en una página, permitiendo a los desarrolladores estructurar el contenido de manera eficiente y responsiva.
Lo mejor de Grid Layout es que permite crear estructuras que se adaptan de manera fluida a distintos tamaños de pantalla, sin necesidad de recurrir a soluciones complicadas o hacks de código. Esto lo convierte en una herramienta esencial para la creación de páginas web modernas, rápidas y fáciles de mantener.
¿Por qué usar Grid Layout?
Facilidad de uso: Con Grid Layout, no es necesario escribir múltiples reglas para alinear y distribuir los elementos. En lugar de eso, simplemente se define una cuadrícula y se colocan los elementos dentro de ella. Esto hace que la maquetación sea más sencilla y directa.
Flexibilidad: Al utilizar filas y columnas, se puede controlar la alineación, el espaciado y el tamaño de los elementos de forma precisa. Además, los elementos pueden redimensionarse automáticamente según el espacio disponible, lo que mejora la adaptabilidad en dispositivos móviles.
Desempeño optimizado: Como se evitan técnicas complicadas como los float o el uso de positioning, el rendimiento de la página mejora considerablemente.
Compatibilidad: La propiedad Grid Layout es compatible con todos los navegadores modernos, lo que garantiza su fiabilidad y funcionalidad en una amplia variedad de entornos.
Ejemplo: Estructura básica de una página web con Grid Layout
Para ilustrar cómo se utiliza Grid Layout, vamos a construir una estructura básica para una página web. Esta estructura contará con un encabezado, un área principal con dos columnas (una para el contenido y otra para una barra lateral), y un pie de página.
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.