En otras ocasiones, hemos hablado sobre el sistema de posicionamiento avanzado, CSS grid, en el cual, podemos ubicar los elementos HTML de nuestra página web con base a una cuadrícula. Retomando este tema, hoy quisiera hablarte de display:grid, una propiedad con la que puedes organizar y controlar el diseño de los elementos de una manera precisa y adaptable, utilizando filas y columnas que tú mismo puedes definir. En este artículo te contaré qué es, para qué sirve y cómo usarlo con ejemplos prácticos que te ayudarán a comprenderlo en profundidad.
¿Qué es display:grid en CSS?
Antes de comenzar, me gustaría que recordemos brevemente qué es CSS Grid, ya que esto nos dará una mejor comprensión de la propiedad que veremos a continuación. El modelo de cuadrícula que conocemos como CSS Grid, es un sistema de diseño bidimensional que te permite crear layouts complejos de forma más fácil. Su propósito es dividir el espacio disponible en filas y columnas para que tengas un control total sobre cómo se distribuyen y alinean los elementos de tu página.
Teniendo esto en cuenta, la propiedad display:grid transforma un contenedor en un “grid container”, lo que significa que todo lo que está dentro se ajustará a un sistema de cuadrículas que puedes personalizar a tu gusto. ¿Y esto por qué es importante?
Vale, sucede que, en el pasado, para lograr diseños similares tenías que depender de hacks como tablas o combinaciones de float y flexbox, lo que no solo era complicado, sino que también limitaba la creatividad. Pero, el display:grid cambió las reglas del juego al ofrecer una solución más intuitiva y flexible. Ahora puedes crear diseños complejos y responsivos de una manera mucho más sencilla y eficiente. También, puedes definir el tamaño, la posición y el comportamiento de los elementos en relación con las filas y columnas de la cuadrícula, lo que te da un control total sobre el layout sin necesidad de recurrir a soluciones engorrosas. Bastante útil, ¿no lo crees?
¿Para qué sirve display:grid en CSS?
Como venía diciendo, display:grid es una propiedad muy útil y versátil que puede aplicarse en distintos escenarios. Veamos a continuación algunos de los más comunes:
- Crear diseños responsivos: Te permite crear layouts que se adapten automáticamente a diferentes tamaños de pantalla para garantizar una experiencia de usuario óptima en todos los dispositivos.
- Distribución uniforme: Facilita el alinear los elementos con espaciados consistentes entre filas y columnas.
- Layouts complejos: Es útil para diseñar encabezados, pies de página, barras laterales y contenidos principales en un esquema ordenado.
- Centrado absoluto: Puedes alinear los elementos en el centro de su contenedor sin necesidad de usar trucos complicados.
Sintaxis básica de display:grid
Debo decir que es bastante fácil implementar la propiedad display: grid, pues su sintaxis básica es sencilla y directa. De hecho, es similar en complejidad a otras propiedades de CSS. Veamos la estructura básica:
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>Y en tu CSS:
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}Te preguntarás ahora, ¿qué hay en cuanto a los valores? Bueno, puedes trabajar con los siguientes:
- grid-template-columns y grid-template-rows: Definen el número y tamaño de las columnas y filas. Aquí, puedes usar valores en píxeles, porcentajes, fracciones (fr) y más.
- gap: Añade espacio entre filas y columnas, como en este ejemplo:
gap: 10px;- grid-area: Este valor asigna un elemento a una celda o conjunto de celdas específico dentro de la cuadrícula.
- justify-content y align-content: Con estos, puedes ajustar la distribución de la cuadrícula dentro del contenedor.
Ejemplos de display:grid
Como siempre, es necesario que veamos algunos ejemplos para que puedas entender mejor cómo funciona esta propiedad:
Layout básico con columnas uniformes
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}Al hacer esto, creas tres columnas iguales que se ajustan al ancho disponible, lo que es perfecto para las tarjetas o elementos de catálogo.
Diseño de encabezado con barra lateral y contenido principal
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}Como puedes ver, aquí usamos la propiedad grid-template-areas para nombrar secciones y organizarlas de forma lógica.
Diseño responsivo con media queries
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}Aquí, las columnas se adaptan automáticamente al tamaño de la pantalla, lo que hace que el diseño sea responsivo sin necesidad de hacer esfuerzos adicionales.
Consejos para usar display:grid en CSS
Ahora que hemos llegado a este punto y has visto algunos ejemplos de cómo usar esta propiedad, me gustaría darte algunos consejos que seguramente te ayudarán al momento de implementarla en tus proyectos:
- Planifica tu diseño: Antes de escribir código, te recomiendo dibujar un esquema básico del layout que quieres lograr. Así, tendrás las ideas ordenadas desde el principio y será más fácil trabajar.
- Combínalo con otras propiedades de CSS: Por ejemplo, puedes usar flexbox dentro de los elementos de la cuadrícula si quieres lograr alineaciones más detalladas.
- Utiliza fracciones (fr): Este valor relativo es perfecto para crear columnas que se ajusten dinámicamente.
- Prueba con DevTools: Los navegadores modernos tienen herramientas visuales para inspeccionar y ajustar cuadrículas en tiempo real, así que no dudes en usarlas para asegurarte de que todo funciona correctamente.
Diferencias entre display:grid y flexbox
Antes de finalizar, quisiera hacer una aclaración sobre cuál es la diferencia entre display:grid y flexbox, pues es algo que suele generar dudas. Puedo decirte que, aunque ambas propiedades facilitan el diseño de layouts, tienen propósitos distintos, como lo veremos a continuación:
| Característica | display:grid | Flexbox |
| Dirección | Bidimensional (filas y columnas) | Unidimensional (filas o columnas) |
| Complejidad de layouts | Es ideal para layouts complejos | Funciona mejor para alineaciones simples |
| Ejemplo de uso | Tablas, encabezados, layouts completos | Menús, botones alineados |
Después de todo lo dicho, sólo quiero reiterar que display:grid en CSS es una herramienta imprescindible para cualquier desarrollador web, ya que su flexibilidad y simplicidad hacen que diseñar layouts sea mucho más eficiente y agradable. No importa si estás creando un proyecto personal o trabajando en un sitio profesional, lo importante aquí es que esta propiedad elevará la calidad de tus diseños, por lo que te invito a usarla y practicar.
Si quieres seguir aprendiendo sobre más funciones útiles para la creación de páginas innovadoras, atractivas y funcionales, te invito a unirte a nuestro Bootcamp en Desarrollo Web. Anímate a transformar tu vida profesional en pocos meses y empezar una carrera en un sector lleno de oportunidades como lo es el IT.
¡No esperes más para empezar una nueva vida!
