¿Quieres aprender a utilizar CSS Grid para tus páginas web? Si la respuesta es sí, estás en el lugar correcto. CSS Grid presenta un número de oportunidades para los desarrolladores Frontend, tales como crea layouts dinámicos, mejora el análisis de los diseños y permitir una mayor conexión entre los contenidos que se ofrecen. Al final de este artículo, estarás listo para usar CSS Grid con confianza en tus páginas web. ¡Empieza ahora!
¿Qué es CSS Grid?
CSS Grid es una técnica de diseño de diseño web que permite a los diseñadores crear diseños de página complejos y flexibles con una estructura de cuadrícula. Con CSS Grid, se puede dividir la página en filas y columnas, y luego colocar elementos en diferentes áreas de la cuadrícula.
En esencia, CSS Grid es un sistema de diseño bidimensional que proporciona una manera más fácil y eficiente de diseñar diseños complejos que antes solo se podían lograr con técnicas de diseño más avanzadas o mediante el uso de marcos de trabajo o bibliotecas de terceros.
La cuadrícula se define en CSS mediante la creación de un contenedor de cuadrícula y luego la definición de las filas y columnas en ese contenedor. Una vez definida la cuadrícula, los elementos se colocan en diferentes áreas de la cuadrícula utilizando la propiedad grid-area.
CSS Grid es compatible con todos los principales navegadores modernos, lo que significa que los diseñadores pueden utilizar esta técnica de diseño sin tener que preocuparse por la compatibilidad del navegador. Además, al utilizar CSS Grid, los diseñadores pueden crear diseños que respondan a diferentes tamaños de pantalla y dispositivos, lo que los hace ideales para diseños de sitios web receptivos.
Estructura de Grid CSS
La estructura de una cuadrícula CSS Grid consta de tres elementos principales: el contenedor de la cuadrícula, las filas y las columnas.
Contenedor de la cuadrícula
el contenedor de la cuadrícula es el elemento HTML que contiene todos los elementos que se organizan en la cuadrícula. Para definir el contenedor como una cuadrícula, debemos establecer su propiedad display en grid.
.container {
display: grid;
}
Filas
las filas de la cuadrícula se definen utilizando la propiedad grid-template-rows, que define el número y tamaño de las filas de la cuadrícula. Podemos establecer el tamaño de cada fila individualmente o utilizar la función repeat() para definir varias filas con el mismo tamaño.
.container {
display: grid;
grid-template-rows: 100px 200px 100px;
}
Este código define una cuadrícula con tres filas de diferentes tamaños: la primera fila de 100px, la segunda fila de 200px y la tercera fila de 100px.
Columnas
las columnas de la cuadrícula se definen utilizando la propiedad grid-template-columns, que define el número y tamaño de las columnas de la cuadrícula. Al igual que con las filas, podemos establecer el tamaño de cada columna individualmente o utilizar la función repeat() para definir varias columnas con el mismo tamaño.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Este código define una cuadrícula con tres columnas de diferentes tamaños: la primera columna de 1fr, la segunda columna de 2fr y la tercera columna de 1fr.
Celdas
una vez definidas las filas y columnas de la cuadrícula, podemos colocar elementos en cada celda utilizando la propiedad grid-area o sus equivalentes grid-row-start, grid-row-end, grid-column-start y grid-column-end. También podemos utilizar la función span para especificar el número de filas o columnas que debe abarcar un elemento.
.container {
display: grid;
grid-template-rows: 100px 200px 100px;
grid-template-columns: 1fr 2fr 1fr;
}
.item1 {
grid-area: 1 / 1 / 3 / 3;
}
.item2 {
grid-area: 2 / 2 / span 2 / span 2;
}
Este código coloca dos elementos en diferentes áreas de la cuadrícula. El elemento con la clase «item1» ocupa las celdas desde la primera fila y la primera columna hasta la tercera fila y la tercera columna. El elemento con la clase «item2» ocupa dos filas y dos columnas, comenzando en la segunda fila y la segunda columna.
Esta es la estructura básica de una cuadrícula CSS Grid, pero hay muchas más propiedades y técnicas que se pueden utilizar para crear diseños más complejos y avanzados.
Tutorial básico de CSS Grid
A continuación podrás ver un tutorial básico de CSS Grid para comenzar, con ejemplos de código para que te sea más fácil de entender.
Definir la cuadrícula
Para definir una cuadrícula, debemos definir tanto las filas como las columnas. Utilizamos las propiedades grid-template-columns y grid-template-rows para definir el número y tamaño de las filas y columnas.
Ejemplo:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
Este código define una cuadrícula con tres columnas de igual ancho (1fr cada una) y dos filas de 100 píxeles de altura.
Colocar elementos en la cuadrícula
Para colocar elementos en la cuadrícula, utilizamos la propiedad grid-area. Podemos darle un nombre a cada área de la cuadrícula y luego especificar el nombre del área en la propiedad grid-area.
Ejemplo:
.item1 {
grid-area: header;
}
.item2 {
grid-area: main;
}
.item3 {
grid-area: sidebar;
}
.item4 {
grid-area: footer;
}
Este código coloca cuatro elementos en diferentes áreas de la cuadrícula. La primera área se llama «header», la segunda «main», la tercera «sidebar» y la cuarta «footer».
Ajustar el tamaño y la posición de los elementos
Una vez que hemos colocado los elementos en la cuadrícula, podemos ajustar su tamaño y posición utilizando las propiedades grid-row-start, grid-row-end, grid-column-start y grid-column-end.
Ejemplo:
.item1 {
grid-area: header;
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;
}
Este código ajusta el tamaño y la posición del elemento con la clase «item1». El elemento se extiende desde la primera fila hasta la segunda fila y desde la primera columna hasta la cuarta columna.
Este es solo un tutorial básico de CSS Grid. Hay muchas más propiedades y técnicas que se pueden utilizar para crear diseños más complejos y avanzados con CSS Grid.
Tutorial avanzado de CSS Grid
Aquí hay un tutorial avanzado de CSS Grid para continuar desde donde dejamos en el tutorial básico:
Ajuste automático de elementos
utilizando la propiedad grid-auto-rows y grid-auto-columns, podemos especificar el tamaño de las filas y columnas creadas automáticamente por CSS Grid.
Ejemplo:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
Este código establece el ancho de cada columna en 1fr y el alto de cada fila se ajusta automáticamente según el contenido. Sin embargo, la altura mínima de cada fila es de 100px y puede crecer según el contenido que tenga.
Ajuste de espaciado
utilizando las propiedades grid-column-gap, grid-row-gap y grid-gap, podemos ajustar el espacio entre filas y columnas de la cuadrícula.
Ejemplo:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
Este código establece un espacio de 20px entre las filas y columnas de la cuadrícula.
Posicionamiento por capas
utilizando la propiedad z-index, podemos especificar la posición en capas de elementos superpuestos en la cuadrícula.
Ejemplo:
.item1 {
grid-area: header;
z-index: 2;
}
.item2 {
grid-area: main;
z-index: 1;
}
Este código coloca dos elementos en diferentes áreas de la cuadrícula y ajusta su posición en capas. El elemento con la clase «item1» se muestra encima del elemento con la clase «item2».
Alineación
utilizando las propiedades justify-content, align-content, justify-items y align-items, podemos ajustar la alineación de los elementos en la cuadrícula.
Ejemplo:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
}
Este código ajusta la alineación horizontal y vertical de los elementos en la cuadrícula al centro.
Este es solo un tutorial avanzado de CSS Grid. Hay muchas más propiedades y técnicas que se pueden utilizar para crear diseños más complejos y avanzados con CSS Grid.
Adaptando CSS Grid a Diferentes Pantallas
Una de las principales ventajas de CSS Grid es que permite crear diseños flexibles y adaptables a diferentes tamaños de pantalla. Aquí te presento algunas técnicas para adaptar una cuadrícula de CSS Grid a diferentes dispositivos y pantallas:
Utiliza unidades relativas
en lugar de utilizar unidades fijas como píxeles, es recomendable utilizar unidades relativas como porcentajes o fracciones (fr). De esta manera, los tamaños de las filas y columnas se ajustarán automáticamente a las dimensiones de la pantalla.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Utiliza la función minmax()
esta función permite establecer un rango de tamaños para una fila o columna. Por ejemplo, podemos establecer una fila con un tamaño mínimo de 100 píxeles y un tamaño máximo de 1 fr. De esta manera, la fila se ajustará automáticamente a la pantalla, pero nunca será más pequeña que 100 píxeles.
.container {
display: grid;
grid-template-rows: repeat(3, minmax(100px, 1fr));
}
Utiliza los medios de consulta (media queries)
los medios de consulta permiten aplicar estilos diferentes a una misma página dependiendo del tamaño de la pantalla. Podemos utilizarlos para cambiar la estructura de la cuadrícula o ajustar los tamaños de las filas y columnas en función del dispositivo.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, minmax(100px, 1fr));
}
}
En este ejemplo, se establece una cuadrícula de tres columnas para pantallas grandes, pero cuando la pantalla tiene un ancho máximo de 768 píxeles, se cambia la estructura de la cuadrícula a una sola columna y se ajustan los tamaños de las filas.
Utiliza la propiedad grid-auto-flow
esta propiedad permite establecer el orden en que se colocan los elementos en la cuadrícula. Por defecto, los elementos se colocan en el orden en que aparecen en el HTML, pero podemos cambiar este orden para adaptarlo a diferentes tamaños de pantalla.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
En este ejemplo, se establece una cuadrícula de tres columnas con el orden de los elementos establecido por defecto. Sin embargo, cuando la pantalla tiene un ancho máximo de 768 píxeles, se cambia la cuadrícula a una sola columna y se utiliza la propiedad grid-auto-flow: dense para permitir que los elementos se coloquen en filas y columnas vacías para aprovechar mejor el espacio disponible.
Estas son solo algunas técnicas para adaptar una cuadrícula de CSS Grid a diferentes tamaños de pantalla. En general, es recomendable utilizar una combinación de unidades relativas, funciones minmax(), medios de consulta y propiedades de la cuadrícula para crear diseños
Herramientas
Crea fácilmente código CSS Grid con las siguientes herramientas online. Solo tendrás que escoger tus opciones y listo el código en segundos.
CSS Grid Generator
El funcionamiento es muy fácil. Con el ratón seleccionas las filas y columnas en grid y podrás ver el código HTML y CSS en un clic.
Más información
Si quieres conocer en profundidad más del tema, te aconsejo mirar estos links con más información:
