CSS Grid es una características que ha renovado el maquetado web. Ofrece una solución moderna y adaptable a diferentes dispositivos. Mediante esta funcionalidad podemos distribuir los elementos en filas y columnas sin complicaciones, solucionando diseños complejos de manera sencilla.
A lo largo de este artículo, mostraré ejemplos prácticos que te ayudarán a comprender cada propiedad y en qué casos resultan ideales.
Ejemplo 1: Grilla básica con 3 columnas
En este primer ejemplo, creamos una grilla simple con tres columnas de igual tamaño y dos filas. Este ejemplo es ideal para iniciarse en el uso de CSS Grid.
Código HTML:
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background: lightblue;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
En este ejemplo se establece el modo grid con display: grid; en el contenedor. La propiedad grid-template-columns: repeat(3, 1fr); indica que se crearán tres columnas de igual ancho, donde cada columna ocupará una fracción igual del espacio disponible (esto es lo que significa 1fr).
Mediante gap: 10px se añade un espacio uniforme de 10 píxeles entre cada celda. Al tener 6 elementos, el navegador crea automáticamente dos filas, distribuyendo los elementos de forma ordenada.
Ejemplo 2: Grilla con columnas de distinto tamaño
Este ejemplo nos muestra cómo definir columnas con tamaños específicos. Es útil cuando queremos asignar más espacio a ciertos contenidos y menos a otros.
Código HTML:
<div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
gap: 10px;
}
.item {
background: silver;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
En este caso, definimos tres columnas: la primera con un ancho fijo de 100px, la segunda que toma el espacio restante (1fr), y la tercera que es el doble de la segunda (2fr). Esta distribución es especialmente útil para diseños donde se requiere destacar o dar mayor relevancia a ciertos elementos, como podría ser un menú o un área de contenido principal.
Ejemplo 3: Alineación de elementos en la grilla
Con CSS Grid no solo organizamos los elementos en filas y columnas, sino que también podemos controlar cómo se alinean dentro de cada celda.
Código HTML:
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
justify-items: center;
align-items: center;
gap: 10px;
}
.item {
background: rgb(243, 163, 216);
padding: 10px;
border: 1px solid #ccc;
}
En este ejemplo, además de definir el tamaño fijo para cada celda mediante grid-template-columns y grid-template-rows, usamos justify-items: center; para centrar el contenido horizontalmente y align-items: center; para centrarlo verticalmente en cada celda.
De esta forma, todos los elementos se posicionan de forma uniforme, lo que resulta en una apariencia limpia y ordenada.
Ejemplo 4: Grilla con áreas nombradas
Utilizar áreas nombradas en CSS Grid nos permite asignar nombres a diferentes secciones de la grilla, haciendo el código más legible y facilitando la organización del diseño.
Código HTML:
<div class="container"> <header class="header">Encabezado</header> <aside class="sidebar">Barra lateral</aside> <main class="content">Contenido principal</main> </div>
Código CSS:
.container {
text-align: center;
display: grid;
grid-template-areas:
"header header"
"sidebar content";
grid-template-columns: 1fr 3fr;
gap: 10px;
}
.header {
grid-area: header;
background: lightgray;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
background: lightblue;
padding: 20px;
}
.content {
grid-area: content;
background: lightcoral;
padding: 20px;
}
Aquí definimos dos filas en la grilla: la primera fila contiene el encabezado (que se extiende por ambas columnas) y la segunda fila se divide en una barra lateral y un contenido principal. Las propiedades grid-template-areas y grid-area permiten asignar estos nombres, lo cual hace que la estructura sea muy intuitiva. Además, al asignar proporciones de 1fr y 3fr a las columnas, se reserva más espacio para el contenido principal en comparación con la barra lateral.
Ejemplo 5: Grilla con auto-fit para diseño adaptable
El siguiente ejemplo demuestra cómo usar auto-fit junto con la función minmax para crear un diseño que se adapta al ancho disponible, lo que resulta ideal para sitios adaptables.
Código HTML:
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.item {
background: peachpuff;
padding: 20px;
border: 1px solid #ccc;
text-align: center;
}
En este ejemplo, repeat(auto-fit, minmax(150px, 1fr)) le indica al navegador que genere tantas columnas como sea posible, siempre que cada columna tenga un ancho mínimo de 150px y pueda crecer hasta ocupar una fracción igual del espacio disponible (1fr). De esta forma, al redimensionar la ventana, el número de columnas se ajusta dinámicamente, permitiendo que el diseño se mantenga organizado en distintos dispositivos.
Ejemplo 6: Superposición de elementos en la grilla
En este ejemplo, veremos cómo podemos lograr que un elemento se superponga a otros dentro de la misma grilla. Esto se consigue definiendo en el CSS que un elemento abarque varias filas y columnas, de manera que su área se extienda y, en efecto, se solape con otros elementos.
Código HTML:
<div class="container"> <div class="item item1">Elemento 1</div> <div class="item item2">Elemento 2</div> <div class="item item3">Elemento 3</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 150px);
gap: 10px;
}
.item {
padding: 10px;
border: 1px solid #333;
color: #fff;
font-weight: bold;
text-align: center;
}
/* El primer elemento se extiende sobre dos columnas y dos filas */
.item1 {
background: rgba(255, 99, 71, 0.8); /* tono tomate con transparencia */
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* Los siguientes elementos se ubican en celdas específicas */
.item2 {
background: rgba(100, 149, 237, 0.8); /* azul aciano */
grid-column: 1;
grid-row: 2;
}
.item3 {
background: rgba(60, 179, 113, 0.8); /* verde medio */
grid-column: 2;
grid-row: 2;
}
Aquí definimos una grilla de 2 columnas y 2 filas. El primer elemento (.item1) se extiende desde la primera hasta la tercera línea tanto en columnas como en filas, ocupando el área completa de la grilla. Los elementos .item2 y .item3 se posicionan en celdas específicas de la segunda fila. Gracias a la transparencia en los colores, se puede observar cómo se superponen, permitiendo visualizar claramente el efecto de solapamiento.
Ejemplo 7: Celdas que se expanden en varias filas
Este ejemplo muestra cómo un elemento puede ocupar más de una fila en la grilla. Es una técnica útil para destacar contenidos importantes o para lograr diseños asimétricos.
Código HTML:
<div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item expandido">C (se expande)</div> <div class="item">D</div> <div class="item">E</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background: #f4a;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
.expandido {
background: #fa4;
grid-row: span 2;
}
En esta grilla de tres columnas, el elemento con la clase .expandido utiliza la propiedad grid-row: span 2; para ocupar el espacio de dos filas consecutivas. Esto hace que el diseño sea más dinámico, ya que no todas las celdas tienen el mismo alto. Es una forma sencilla de resaltar un contenido específico dentro de la estructura de la grilla.
Ejemplo 8: optimización de espacios
La propiedad grid-auto-flow: dense le dice al navegador que trate de rellenar los espacios vacíos en la grilla de forma compacta, reorganizando los elementos si es necesario. Este ejemplo es ideal para entender cómo optimizar el espacio en un diseño complejo.
Código HTML:
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
gap: 10px;
}
.item {
background: rgb(196, 188, 245);
padding: 20px;
border: 1px solid #ccc;
text-align: center;
}
En esta grilla con tres columnas iguales, la propiedad grid-auto-flow: dense permite que el navegador trate de llenar cualquier hueco que pudiera quedar, reorganizando los elementos para lograr una distribución más compacta.
Esto es especialmente útil cuando los elementos tienen distintos tamaños o cuando algunos ocupan más de una celda, ya que se optimiza el uso del espacio disponible en el diseño.
Ejemplo 9: Diseño en forma de «tablero de ajedrez»
Este ejemplo recrea el patrón de un tablero de ajedrez usando CSS Grid y pseudo-clases. Con él, se alternan los colores de fondo de las celdas para lograr el efecto característico de este juego.
Código HTML:
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>
Código CSS:
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 2px;
}
.item {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #333;
font-size: 1.8em;
}
/* Se alternan los colores de fondo para simular un tablero */
.item:nth-child(odd) {
background: #fff;
}
.item:nth-child(even) {
background: #000;
color: #fff;
}
Creamos una grilla de 3 columnas y 3 filas, cada celda de 100px por 100px. Con las pseudo-clases :nth-child(odd) y :nth-child(even) se alternan los colores de fondo (blanco y negro), lo que imita el patrón de un tablero de ajedrez. Esta técnica, además de ser visualmente llamativa, es muy didáctica para entender cómo aplicar estilos condicionales en CSS.
Ejemplo 10: Grilla anidada
La grilla anidada consiste en colocar una grilla dentro de otra. Esto permite organizar contenidos en niveles, creando estructuras complejas y ordenadas dentro de una misma página.
Código HTML:
<div class="container">
<div class="item">Elemento 1</div>
<div class="nested-container">
<div class="nested-item">A</div>
<div class="nested-item">B</div>
<div class="nested-item">C</div>
</div>
<div class="item">Elemento 3</div>
</div>Código CSS:
/* Grilla principal */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.item {
background: #e0e0e0;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
/* Grilla anidada en la segunda celda */
.nested-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
background: #f9f9f9;
padding: 10px;
}
.nested-item {
background: #c0c0ff;
padding: 10px;
border: 1px solid #999;
text-align: center;
}
En la grilla principal definimos tres columnas, donde la celda central contiene una grilla anidada. Esta grilla interna se organiza en tres columnas de igual tamaño, permitiendo disponer subelementos de forma independiente a la estructura global. La grilla anidada es una técnica muy útil cuando se requiere una organización más detallada dentro de una sección específica de la página, dándote mayor control sobre el diseño a distintos niveles.
En conclusión
CSS Grid es una herramienta poderosa y versátil que nos permite diseñar páginas web de forma organizada, flexible y responsiva. A través de estos diez ejemplos, hemos visto desde la estructura básica hasta técnicas avanzadas, como la superposición de elementos, la expansión de celdas, la optimización del espacio con grid-auto-flow: dense, la creación de patrones estéticos y la organización de grillas anidadas. Cada ejemplo nos demuestra cómo, con unas pocas líneas de código, podemos lograr diseños complejos y adaptables a cualquier dispositivo.
La riqueza de CSS Grid radica en su capacidad para simplificar el proceso de maquetación. En lugar de depender de métodos tradicionales que requerían de soluciones complicadas, CSS Grid nos ofrece un sistema intuitivo basado en filas y columnas, facilitando la tarea de alinear y distribuir elementos de manera precisa. Además, la posibilidad de nombrar áreas o permitir que ciertos elementos se expandan, abre un abanico de posibilidades para el diseño creativo y funcional.
Espero que estos ejemplos hayan aclarado los conceptos fundamentales y las propiedades clave de CSS Grid. Al experimentar con estas técnicas, verás que la práctica es esencial para dominar cualquier herramienta de diseño web. La exploración y la adaptación de estos ejemplos a tus propios proyectos te ayudarán a comprender en profundidad cómo se comporta cada propiedad y a encontrar las soluciones ideales para tus necesidades.
Si te interesa aprender más sobre maquetado web déjame un comentario o escríbeme un mensaje para más información.
Para más información sobre CSS gri layout se puede consultar la documentación de MDN.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta