CSS Grid – Introducción
CSS Grid es una herramienta de diseño web que permite crear diseños complejos y flexibles de manera eficiente. Su sintaxis intuitiva y su amplia compatibilidad la convierten en una herramienta imprescindible para desarrolladores web.
Flexibilidad y eficiencia
Fecha de publicación: 09/12/2022
Compartir
CSS Grid – también conocido como grid – es un sistema de maquetación bidimensional basado en cuadrículas. Grid supone un importante avance para el desarrollo web ya que, aparte de ofrecer soluciones a importantes problemas de diseño habituales antes de su aparición, permite crear estructuras más complejas con menos volumen de código o elementos dinámicos que se adaptan a diferentes dispositivos y resoluciones de pantalla.
Conceptos básicos – La cuadrícula
Un diseño con css grid, consta de un elemento principal, sobre el que se aplica la propiedad grid. Este elemento es el padre directo de todos los elementos secundarios de la cuadrícula.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="grid-container"> <div class="grid-item"> Norte </div> <div class="grid-item"> Sur </div> <div class="grid-item"> Este </div> <div class="grid-item"> Oeste </div> </div> |
En el ejemplo superior tenemos un contenedor principal – grid-container -, con cinco elementos secundarios –grid-item – en su interior .
|
1 2 3 4 |
CSS .grid-container { display: grid; } |
Como vemos, crear la cuadrícula grid es sumamente sencillo, solo necesitamos añadir al contenedor principal la propiedad display, con uno de los dos valores de grid: grid o inline-grid,
Los valores inline-grid y grid indican cómo se comportarán los elementos secundarios, en este caso grid-item, con respecto al elemento principal, en este caso grid-container.
Con inline-grid los grid-items se colocan, de forma predeterminada, en filas ocupando el ancho definido por el contenido del grid-item más ancho.
Con grid los grid-items se colocan, de forma predeterminada, en filas abarcando todo el ancho del grid-container.
Terminología básica
Antes de adentrarnos en las propiedades de grid, conviene comprender una serie de conceptos básicos que utilizaremos con frecuencia.
Grid container: Elemento sobre el que se aplica la propiedad display con uno de los dos valores de grid.
Grid item: Elemento secundario dentro del grid container, es decir, descendiente directo del mismo.
Grid lines: Cada una de las líneas divisorias, verticales u horizontales, que componen la estructura de la cuadrícula.
Grid columns: Cada columna, separada por dos grid lines.
Grid rows: Cada fila, separada por dos grid lines.
Propiedades de la cuadrícula
grid-template-columns
Define el número de columnas y su ancho.
|
1 2 |
.grid-container { grid-template-columns:200px auto 200px;} |
En el ejemplo anterior el espacio disponible dentro de grid container se divide entre dos celdas laterales de 200px y una central que ocupará el resto. El tamaño puede representarse en modo de porcentaje, fracción del espacio libre -fr- o longitud.
grid-template-rows
Define el número de filas y su altura.
|
1 2 3 |
.grid-container { grid-template-rows:100px 20vh 200px; } |
El tamaño puede representarse en modo de porcentaje, fracción del espacio libre -fr- o longitud.
grid-gap
Define la separación que habrá entre columnas y entre filas.
|
1 |
.grid-container {grid-gap:20px;} |
En este caso, filas y columnas tendrían una separación de 20px.
Soluciones eficientes
CSS Grid es una herramienta imprescindible para diseñar sitios web modernos ya que permite crear proyectos complejos de manera eficiente y fácil de mantener.
Libertad creativa
Escalabilidad
La funcionalidad de CSS Grid permite crear diseños más escalables y reutilizables, lo que a su vez facilita el mantenimiento y la actualización del sitio web.
