Aprenda a crear sitios web bidimensionales con CSS Grid

Con CSS Grid puede crear diseños de sitios web bidimensionales en la mitad del tiempo que normalmente lo haría.

CSS Grid es el sucesor del sistema de diseño flotante, y aunque todavía hay casos en los que usar la estructura de diseño flotante puede resultar más práctico que usar CSS Grid, algunos desarrolladores tienden a usar CSS Grid solo para estructurar sus sitios web.

Esto no es una sorpresa, ya que CSS Grid es una herramienta poderosa para tener en su arsenal. Esta guía le enseñará cómo utilizar CSS Grid en todos sus proyectos de desarrollo web.

Cómo funciona el sistema de cuadrícula CSS

CSS Grid (o simplemente Grid) es esencialmente un sistema de diseño de sitios web bidimensional que se utiliza para estructurar los elementos de una página web. El sistema de diseño CSS Grid se basa en un concepto de padre-hijo, donde tendría un contenedor principal (el padre) y varios elementos de cuadrícula diferentes (los hijos) dentro de ese contenedor.

Para utilizar CSS Grid en cualquier sitio web, primero deberá inicializar el contenedor Grid. Esto se hace estableciendo la propiedad de visualización del elemento padre deseado en el valor de la cuadrícula.

Ejemplo de contenedor de cuadrícula CSS

 
selector{
 display: grid;
 }

El selector puede ser un elemento HTML, una clase o una identificación; lo importante es que identifica directamente el elemento HTML que encierra todos los demás elementos HTML en la página web.

En una estructura de diseño de cuadrícula, todos los elementos dentro del contenedor se denominan elementos de cuadrícula . De forma predeterminada, el diseño de la cuadrícula CSS es vertical (que también es la estructura de diseño predeterminada en HTML), por lo que cuando se inicializa una cuadrícula CSS utilizando la propiedad de visualización que se encuentra arriba, el diseño de los elementos de la cuadrícula seguirá siendo el mismo (vertical).

Para reorganizar los elementos de la cuadrícula en la página web, deberá usar la propiedad grid-template-columnas , la propiedad grid-template-rows o una combinación de ambas.

Esta es la razón por la que CSS Grid se identifica como un sistema de diseño bidimensional; le permite estructurar sus elementos de cuadrícula tanto horizontalmente (filas) como verticalmente (columnas) al mismo tiempo.

Uso de la propiedad Grid-template-columnas

La propiedad grid-template-columnas siempre debe usarse dentro del elemento contenedor junto con la propiedad de visualización. Con la propiedad grid-template-columnas , puede especificar el número de columnas que desea en su diseño de cuadrícula CSS, de una de varias maneras.

Una forma de estructurar los elementos de la cuadrícula es mediante el uso de píxeles (px).

Ejemplo de estructuración de elementos de cuadrícula con píxeles

 
.gridContainer{
 display: grid;
 grid-template-columns: 400px 400px 400px;
 }

Hay dos cosas que debe tener en cuenta en el ejemplo anterior. La primera es que al usar el código anterior se crearán tres columnas con un ancho de 400 px cada una en su página web. Si tiene menos de tres elementos de cuadrícula en su contenedor, entonces solo se mostrarán una o dos columnas en su pantalla.

Sin embargo, si el número de elementos de la cuadrícula en su contenedor excede tres, cada grupo de tres elementos de la cuadrícula se colocará en una nueva línea, hasta que estén terminados.

La segunda cosa a tener en cuenta es que usar valores px para estructurar sus elementos de cuadrícula no es un enfoque muy práctico. Esto se debe principalmente a que la unidad de píxeles no admite el diseño receptivo .

Regrese al ejemplo anterior; si tuviéramos seis elementos de la cuadrícula en nuestro contenedor, los dos elementos de la cuadrícula a la izquierda no serían inmediatamente visibles en una tableta.

Una alternativa recomendada al uso de px (o cualquier otro valor fijo) para diseñar sus elementos de cuadrícula es usar fracciones (unidades fr).

Ejemplo de uso de valores de fracciones

 
.gridContainer{
 display: grid;
 grid-template-columns: 1fr 2fr;
 }

El código anterior generará dos columnas en la página web deseada. La columna de la derecha tendrá el doble de ancho que la de la izquierda. La razón principal por la que se recomienda usar fr es porque fr apoya la capacidad de respuesta.

Por lo tanto, sea cual sea el tamaño de la pantalla de un dispositivo, la columna de la derecha siempre será el doble de grande que la de la izquierda.

Este diseño es popular en casos en los que hay una sección aparte en una página web. La columna de menor tamaño se reservaría para la sección aparte, que contendría contenido relacionado con el flujo principal, pero que no forma parte del mismo (como una tabla de contenido).

Uso de la propiedad Grid-template-rows

Los criterios para usar la propiedad grid-template-rows son algo idénticos a los de la propiedad grid-template-columnas.

Una diferencia obvia es que donde la propiedad grid-template-rows crea filas, la propiedad grid-template-columnas crea columnas. Sin embargo, existen otras diferencias más sutiles entre las dos propiedades (como las filas implícitas y la estructura general de las filas).

La estructura de filas

Volviendo al ejemplo anterior de uso de valores de fracción, si ese código se usa en más de dos elementos, los elementos adicionales se ajustarán creando filas adicionales con dos columnas hasta que todos los elementos estén en la cuadrícula.

Este no es el caso de la propiedad grid-template-rows . Considere el siguiente ejemplo.

Ejemplo de filas de plantilla de cuadrícula

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 }

Si el código CSS anterior está diseñado para apuntar a un documento HTML que contiene cinco etiquetas <div> que son hijos directos del elemento de clase gridContainer, entonces el primer elemento mantendrá su altura predeterminada y el segundo elemento tendrá una altura que es tres veces el tamaño del primero.

El problema se hace evidente cuando llega al tercer elemento div; encontrará que en lugar de rodear y crear una segunda columna, las filas continuarán ininterrumpidamente en la pantalla. Estas filas se denominan filas implícitas porque no se verán afectadas por el código anterior y seguirán conservando su altura predeterminada.

Estas filas implícitas se pueden segmentar mediante la propiedad grid-auto-rows .

Uso de la propiedad Grid-auto-rows

La propiedad grid-auto-rows se usa a menudo para asignar altura a las filas en una cuadrícula que cae fuera del rango de la propiedad grid-template-rows .

Ejemplo de cuadrícula-filas automáticas

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 grid-auto-rows: 3fr;
 }

Si el código CSS anterior se utiliza para apuntar a un contenedor que encierra directamente cinco elementos de cuadrícula, la propiedad de filas de plantilla de cuadrícula anterior se aplicará a los dos primeros elementos de cuadrícula, mientras que la propiedad de fila automática de cuadrícula se aplicará a los otros tres elementos — resolviendo eficazmente el problema de filas implícitas.

Aunque puede usar la fila de plantilla de cuadrícula y las columnas de plantilla de cuadrícula por separado cuando sea necesario, se recomienda que use la cuadrícula CSS cuando se requieran diseños bidimensionales (filas y columnas). Si solo se necesita un diseño unidimensional (filas o columnas), una estructura de diseño flotante sería una opción mucho mejor.

Estructurar el diseño de su sitio web nunca ha sido tan fácil

Con CSS Grid puede crear un sitio web bidimensional, basado en un concepto de padre e hijo. Las cosas que debe recordar para que esto sea posible incluyen:

• Asignar el valor de la cuadrícula a la propiedad de visualización en el elemento contenedor.
• Usando las filas de plantilla de cuadrícula y columnas de plantilla de cuadrícula dentro del elemento contenedor.
• Usar la propiedad grid-auto-row cuando la cantidad de elementos en el elemento contenedor supera los objetivos de la propiedad grid-template-rows .

La conclusión final es asegurarse de utilizar eficazmente la cuadrícula CSS en estructuras de diseño bidimensionales. Cuando se requiere una estructura de diseño unidimensional, la estructura de diseño flotante puede resultar una mejor opción.