GRID CSS: ¿Qué es y como usar?

GRID CSS es una poderosa herramienta para crear layouts complejos y responsivos en tu página web. En este artículo, te explicaremos qué es GRID CSS, cómo usarlo con ejemplos prácticos y cómo puede transformar el display de tus elementos en HTML. Aprende a diseñar layouts adaptativos y flexibles, optimizando la experiencia del usuario en cualquier dispositivo.

1 ¿Qué es GRID CSS?

CSS Grid es un módulo de diseño web que te permite crear diseños de página complejos (layouts) y adaptables de una manera más fácil y eficiente que los métodos tradicionales como Flexbox CSS.

En esencia, CSS Grid funciona como una cuadrícula bidimensional que te permite organizar los elementos de tu página web en filas y columnas. A cada fila y columna se le puede asignar un tamaño específico, y los elementos se pueden colocar en cualquier celda de la cuadrícula.

EN OTRAS PALABRAS….

Piensa en CSS Grid como una tabla flexible, donde en lugar de filas y columnas fijas, puedes definir el tamaño y la ubicación de cada celda de manera individual. Cada celda de la cuadrícula puede contener cualquier tipo de elemento HTML que desees, como párrafos, imágenes, botones, tablas, formularios, etc.

2. ¿Cómo funciona GRID CSS?.

Para entender como funciona GRID CSS, iremos desde el inicio siguiendo estos PASOS:

2.1. Vamos desde el inicio – ¿Cómo se estructuran los elementos de una página web?

Primero, debemos saber que cada vez que introducimos un nuevo elemento en una página (usando HTML -HyperText Markup Language-) como un título, un párrafo, una imagen, una lista, una tabla, etc., debemos comprender que cada nuevo elemento que añadimos se va introduciendo en la página web por defecto uno debajo del otro y ocupando un cierto espacio por defecto (si deseas, sigue este enlace al modelo de caja CSS para entender cómo funciona el espacio que ocupa un elemento HTML).

2.2. ¿Y cómo modificamos la estructura por defecto que toman los elementos de una página?

Ahora bien, si deseamos que estos elementos, o alguno de ellos, se coloquen uno al lado del otro, o uno debajo del otro, o que alguno de ellos ocupe un espacio mayor que otro en la página web (u otras modificaciones, según deseemos), es aquí donde podemos implementar esta estructura de GRID CSS para llevar a cabo esta organización.

2.3. ¿Cómo podemos implementar GRID CSS para llevar a cabo esta modificación en los espacios que ocupan los elementos dentro de una página web?

Antes de responder directamente esta pregunta, debemos saber lo siguiente:

Como dijimos, al introducir un nuevo elemento en una página web como un título, párrafo u imagen, cada uno de ellos se va colocando uno debajo de otro por defecto. Pero también, podemos introducir un contenedor (como un div) que actúe tal cual su nombre lo indica, como un contenedor de estos elementos dentro de la página.

¿Y por qué esto es importante para entender cómo funciona Grid CSS?

Esto es así porque al introducir este contenedor, y dentro de él los elementos (títulos, párrafos, listas, tablas, etc.), nos permite activar esta propiedad de GRID CSS en dicho contenedor (usando display: grid).

Y esto, a su vez, nos permite que cada uno de los elementos hijos que introduzcamos dentro de este contenedor, les podremos modificar el espacio que ocupen, su ubicación, alineación, tamaño y más, dentro de dicho contenedor, y por ende, dentro de la página.

POR EJEMPLO:

En la imagen, el área celeste representa el contenedor HTML (que podría ser un elemento div) y los cuadros rosas son los elementos HTML hijos dentro de ese contenedor (como títulos, párrafos, imágenes, etc.). Utilizando la propiedad display: grid en el contenedor, podemos transformar su diseño de una manera dinámica y flexible.

Y a su vez, al aplicar las propiedades de Grid CSS a cada uno de estos elementos hijos, podemos modificar su ubicación, alineación, tamaño y más, permitiendo una personalización total del diseño.

¿CÓMO FUNCIONA EXACTAMENTE?

1. Contenedor Grid: El área celeste es nuestro contenedor. Para convertirlo en un grid, aplicamos display: grid a su CSS.
2. Elementos Hijos: Los cuadros rosas representan los elementos hijos dentro del contenedor. Cada uno de estos elementos puede ser ajustado individualmente mediante diversas propiedades de Grid CSS.

VENTAJAS DEL GRID CSS:

• Flexibilidad: Ajusta el diseño de tu página web fácilmente.
• Alineación Precisa: Coloca y alinea elementos con gran precisión.
• Responsividad: Crea diseños que se adaptan a diferentes tamaños de pantalla sin complicaciones.

2.4. Ejemplo técnico de como funciona GRID CSS?

Supongamos que tenemos el siguiente contenedor que aloja unos elementos hijos, usando una estructura HTML correspondiente, como la siguiente:

Y aplicamos las siguientes reglas GRID CSS al contenedor y a sus elementos hijos:

En este ejemplo, el contenedor .contenedor se convierte en un grid con tres columnas de igual tamaño y un espacio de 10px entre cada elemento. Los elementos .item dentro del grid se estilizan con un fondo rosado y texto centrado.

VISUALIZACIÓN EN NAVEGADOR:

CONCLUSIÓN:

Grid CSS es una herramienta poderosa que puede transformar completamente la manera en que diseñamos nuestras páginas web. No solo facilita la creación de diseños complejos, sino que también asegura que estos sean flexibles y adaptativos a cualquier dispositivo.

A CONTINUACÓN IREMOS AMPLIANDO SOBRE LAS PRINCIPALES PROPIEDADES DE GRID CSS Y EN EL SIGUIENTE PUNTO «5» DAREMOS OTRO EJEMPLO MÁS COMPLETO PARA INTENTAR EXPLICAR QUE PODEMOS HACER USANDO GRID CSS

3. Propiedades CSS del contenedor GRID.

A continuación iremos nombrando las principales propiedades CSS que podemos usar en estos contenedores:

1. Display: grid:
2. Grid-template-columns
3. Grid-template-rows.
4. Grid-template-areas.
5. Grid-gap / Row-gap / Column-gap.
6. grid-auto-rows / grid-auto-columns
7. Grid-auto-flow
8. Align-items y Justify-items.
9. Align-content y Justify-content.

3.1. Display: grid:

Al aplicar display: grid; a un elemento contenedor (como un div), se activan las funcionalidades de CSS Grid Layout para ese contenedor y sus elementos hijos. Esto significa que todos los elementos hijos de este contenedor se convertirán en celdas dentro de una cuadrícula (grid).

IMPORTANTE! Tener en cuenta que esta propiedad se usa en el contenedor GRID. Y que por si sola no implica ninguna modificación, se debe acompañar con las demás propiedades GRID.

Una vez que activamos esta propiedad de GRID CSS en el contenedor, debemos ir introduciendo las demás propiedades de GRID CSS para definir las celdas que formarán las columnas y filas y sus respectivos comportamientos (tamaño, ubicación, alineación y más).

EJEMPLO APLICANDO display:grid:

3.2. Grid-template-columns

Al usar esta propiedad en el contenedor estamos definiendo el número y tamaño de las columnas (de arriba a abajo) en un contenedor de GRID.

3.2.1. Valores comunes:

1. px, em, rem, %: Valores fijos (por ejemplo, 100px, 10%).
2. fr (fracción): Unidad flexible que divide el espacio disponible en fracciones.
3. auto: Tamaño automático basado en el contenido del elemento.
4. min-content, max-content: Ajusta el tamaño según el contenido mínimo o máximo.
5. repeat(): Repite un patrón de tamaños.
6. minmax(min, max): Define un tamaño mínimo y máximo para la columna.

3.2.2. Ejemplos usando grid-template-columns:

SUPONGAMOS QUE TENEMOS EL SIGUIENTE HTML (CONTENEDOR Y ELEMENTO HIJOS):

Como vemos, esta estructura HTML (sin la propiedades de GRID CSS). Dan como resultado dicha visualización (izquierda el HTML y derecha su visualización en un navegador).

Y SI APLICAMOS LOS SIGUIENTES GRID CSS:

EXPLICACIÓN DEL EJEMPLO:

Ahora, aplicando la propiedad GRID CSS vemos que la visualización del HTML cambia y se crean TRES columnas por las siguientes razones:

1. display: grid:
   • Esta propiedad convierte al contenedor en una cuadrícula (grid container). Todos los elementos hijos directos de este contenedor se convierten en elementos de cuadrícula (grid items).
2. grid-template-columns: 100px 100px 100px:
   • Esta propiedad define un layout de cuadrícula con tres columnas.
   • Cada una de las columnas tiene un ancho fijo de 100 píxeles.
   • Los elementos hijos se colocarán en estas columnas de izquierda a derecha, y cuando se llenen todas las columnas, los siguientes elementos pasarán a una nueva fila.

ACLARACIÓN: Como vemos en el ejemplo, se crean tres columnas de 100px cada una, pero este comportamiento (diseño y tamaño de las columas) lo podemos modificar a deseo usando los diferentes valores (punto 3.2.1.) que nos proporciona la propiedad grid-template-columns.

3.2.3. Ejemplos de uso comunes de grid-template-columns:

1- Tres columnas iguales:

.grid-container {    
     display: grid;     
     grid-template-columns: 1fr 1fr 1fr;
}Lenguaje del código: CSS (css)

Esto crea tres columnas que ocupan partes iguales del espacio disponible.

2- Columnas de tamaños fijos y flexibles:

.grid-container { 
      display: grid; 
      grid-template-columns: 200px 1fr 2fr;
}Lenguaje del código: CSS (css)

La primera columna tiene un ancho fijo de 200px, la segunda ocupa una fracción del espacio restante y la tercera dos fracciones.

3- Uso de repeat():

.grid-container {   
       display: grid;   
       grid-template-columns: repeat(3, 1fr);
}Lenguaje del código: CSS (css)

Esto es equivalente a 1fr 1fr 1fr.

4- Tamaño mínimo y máximo:

.grid-container {    
    display: grid;
    grid-template-columns: minmax(100px, 300px) 1fr;
}Lenguaje del código: CSS (css)

La primera columna tendrá un tamaño mínimo de 100px y un máximo de 300px, y la segunda columna ocupará el espacio restante.

3.3. Grid-template-rows.

grid-template-rows define el número y tamaño de las filas (de izquierda a derecha) en un contenedor de grid.

3.3.1. Valores comunes:

• px, em, rem, %: Valores fijos.
• fr: Unidad flexible para distribuir el espacio.
• auto: Tamaño automático basado en el contenido del elemento.
• min-content, max-content: Ajusta el tamaño según el contenido mínimo o máximo.
• repeat(): Repite un patrón de tamaños.
• minmax(min, max): Define un tamaño mínimo y máximo para la fila.

3.3.2. Ejemplos usando grid-template-rows:

SUPONGAMOS QUE AL HTML DEL PUNTO ANTEIOR AHORA LE APLICAMOS EL SIGUIENTE GRID CSS:

EXPLICACIÓN DE ESTE EJEMPLO:

1. display: grid:
   • Esta propiedad convierte al contenedor en una cuadrícula (grid container). Todos los elementos hijos directos de este contenedor se convierten en elementos de cuadrícula (grid items).
2. grid-template-rows: 1fr 3fr 1fr:
   • Esta propiedad define un layout de cuadrícula con tres filas.
   • La altura de cada fila se define en unidades fraccionales (fr), que representan una proporción del espacio disponible en el contenedor.
   • 1fr 3fr 1fr significa que la primera fila ocupará una fracción del espacio disponible, la segunda fila ocupará tres fracciones del espacio disponible y la tercera fila ocupará una fracción del espacio disponible.

3.3.3. Otros ejemplos comunes:

Dos filas con tamaños específicos:

.grid-container {    
      display: grid;  
      grid-template-rows: 100px 200px;
}Lenguaje del código: CSS (css)

La primera fila tendrá una altura de 100px y la segunda de 200px.

Filas automáticas:

.grid-container {    
      display: grid;    
      grid-template-rows: auto auto;
}Lenguaje del código: CSS (css)

Ambas filas se ajustan automáticamente según el contenido.

Uso de repeat():

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
}Lenguaje del código: CSS (css)

Esto crea tres filas que ocupan partes iguales del espacio disponible.

Tamaño mínimo y máximo:

.grid-container {
    display: grid;
    grid-template-rows: minmax(50px, 150px) 1fr;
}Lenguaje del código: CSS (css)

La primera fila tendrá un tamaño mínimo de 50px y un máximo de 150px, y la segunda fila ocupará el espacio restante.

3.4. Grid-template-areas.

La propiedad grid-template-areas en CSS Grid te permite definir áreas con nombre dentro de una cuadrícula, asignándoles nombres descriptivos que representan las diferentes secciones de tu diseño. Esto facilita la ubicación y organización de los elementos dentro de la cuadrícula de una manera más intuitiva y visual.

3.4.1. Sintaxis:

grid-template-areas:
  "<area-name> <area-name> <area-name>"
  "<area-name> <area-name> <area-name>"
  ...;Lenguaje del código: HTML, XML (xml)

• area-name: Es un nombre único que se asigna a cada área (celda) de la cuadrícula. Los nombres no pueden contener espacios ni caracteres especiales.
• Comillas dobles («»): Encierran cada línea de nombres de área, separándolas entre sí.
• Saltos de línea: Cada línea representa una fila de la cuadrícula, y los nombres de área se ubican en la misma posición que las celdas que ocupan.

EJEMPLO:

grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";Lenguaje del código: JavaScript (javascript)

En este ejemplo:

• La primera fila ("header header header") define tres áreas con nombre header, que representarán las tres primeras celdas que forman las columnas de la cuadrícula.
• La segunda fila ("nav main aside") representa las tres áreas (celdas) de dicha segunda fila: nav a la izquierda, main en el centro y aside a la derecha.
• La tercera fila ("footer footer footer") define tres áreas con nombre footer, que representarán las tres celdas que forman las columnas de la parte inferior.

USO DE grid-area PARA POSICIONAR ELEMENTOS:

Para implementar correctamente esta propiedad, ahora a cada elemento hijo dentro del contenedor debemos especificarle con la propiedad grid-area usando el <area name> y el nombre que hayamos utilizado en grid-template-areas. Usando la siguiente sintaxis:

.elemento {
  grid-area: <area-name>;
}Lenguaje del código: CSS (css)

• .elemento: Selector CSS del elemento que deseas posicionar.
• <area-name>: El nombre del área de la cuadrícula donde se ubicará el elemento.

Ejemplo de uso de grid-area en los elementos hijos:

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.aside {
  grid-area: aside;
}

.footer {
  grid-area: footer;
}Lenguaje del código: CSS (css)

En este caso, cada elemento se posicionará en el área correspondiente según el nombre que se le haya asignado en la propiedad grid-template-areas.

3.4.2. Ejemplo completo:

Supongamos que tenemos el siguiente HTML con UN CONTENEDOR y 4 ELEMENTOS HIJOS. Y cada uno de los elementos HTML tiene una clase para luego llamarlos con CSS y aplicarles las reglas de GRID.

APLICAMOS REGLAS DE GRID CSS AL CONTENEDOR CON grid-template-areas:

Explicación de estas reglas GRID CSS al contenedor:

1. display: grid;:
   • Convierte el elemento contenedor en un grid, permitiendo el uso de propiedades grid específicas para organizar sus elementos hijos.
2. grid-template-columns: 1fr 3fr;: Define dos columnas en el grid.
   • La primera columna ocupará una fracción del espacio disponible (1fr).
   • La segunda columna ocupará tres fracciones del espacio (3fr). Esto significa que la segunda columna será tres veces más ancha que la primera.
3. grid-template-rows: 100px auto 50px;: Define tres filas en el grid:
   • La primera fila tiene una altura fija de 100px.
   • La segunda fila tiene una altura automática (auto), ajustándose al contenido.
   • La tercera fila tiene una altura fija de 50px.
4. grid-template-areas: ...: Aplica un nombre (representativo) a cada una de las celdas que formal las filas y columnas (que fueron definidas previamente con grid-template-columns: 1fr 3fr; y grid-template-rows: 100px auto 50px;) y que luego usáremos en los elementos hijos para decirles en que celdas se ubicarán:
   • "header header": Representa la primera fila y le da el nombre header a las celdas que forman las dos columnas.
   • "sidebar main": Representa la segunda fila (auto) tiene dos áreas para cada una de las celdas de las dos columnas:
     • La primera celda de la columna es un área llamada sidebar.
     • La segunda celda de la columna es un área llamada main.
   • "footer footer": Representa la tercera fila y le da el nombre footer a las celdas que forman las dos columnas.

ACLARACIÓN: Para que el comportamiento de grid-template-areas se cumpla, debemos especificar el <area-name> en cada elemento hijo. Para ellos llamamos a cada elemento hijo con el selector CSS de clase que posee cada uno individualmente y aplicamos grid-area:

APLICAMOS LA PROPIEDAD grid-area A LOS ELEMENTOS HIJOS INDIVIDUALMENTE:

RESULTADO VISUAL DEL EJEMPLO:

En este ejemplo, existen 2 columnas y 3 filas:

1. La primera fila: Une las celdas que forman las dos columnas creando una sola fila que ocupa todo el ancho.
   • Este comportamiento se logra usando "header header" en el grid-template-areas y luego aplicando el grid-area: "header" al elemento hijo con el class="header".
2. La segunda fila: Utiliza las dos celdas de las dos columnas
   • Este comportamiento se logra usando "sidebar main" en el grid-template-areas y luego aplicando el grid-area: "sidebar" y el grid-area: "main" a los elementos hijos con los class="sidebar" y class="main".
3. Y la tercera fila: También une las celdas de las dos columnas formando una sola fila que ocupa todo el ancho.
   • Este comportamiento se logra usando "footer footer" en el grid-template-areas y luego aplicando el grid-area:"footer" al elemetno hijo con el class="footer".

Visualización del último ejemplo desglosando las celdas (columnas y filas) que activa la propiedad GRID CSS:

3.5. Grid-gap / Row-gap / Column-gap.

Las propiedades grid-gap, row-gap, y column-gap en CSS Grid se utilizan para definir el espacio entre los elementos (celdas) de la cuadrícula. Estas propiedades facilitan la creación de un diseño limpio y organizado al permitir el control preciso del espaciado entre las celdas del grid.

3.5.1. grid-gap:

grid-gap es una propiedad abreviada que define el espacio entre las filas y columnas (de manera general) en una cuadrícula.

SINTAXIS

grid-gap: <row-gap> <column-gap>;Lenguaje del código: HTML, XML (xml)

• <row-gap>: Define el espacio entre filas.
• <column-gap>: Define el espacio entre columnas.

EJEMPLO:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px 15px;
}Lenguaje del código: CSS (css)

En este ejemplo, hay un espacio de 20px entre las filas y 15px entre las columnas.

3.5.2. row-gap:

row-gap se usa para establecer el espacio entre las filas de la cuadrícula.

SINTAXIS:

row-gap: <length>;Lenguaje del código: HTML, XML (xml)

• <length>: Define la distancia entre filas.

EJEMPLO:

.grid-container {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    row-gap: 20px;
}Lenguaje del código: CSS (css)

En este ejemplo, hay un espacio de 20px entre cada fila.

3.5.3. Column-gap:

column-gap se usa para establecer el espacio entre las columnas de la cuadrícula.

SINTAXIS:

column-gap: <length>;Lenguaje del código: HTML, XML (xml)

• <length>: Define la distancia entre columnas.

EJEMPLO:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
}Lenguaje del código: CSS (css)

En este ejemplo, hay un espacio de 15px entre cada columna.

3.5.4. Ejemplo usando row-gap y column-gap:

EJEMPLO con row-gap y column-gap: Puedes especificar los gaps por separado si deseas mayor control:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    row-gap: 10px;
    column-gap: 20px;
}Lenguaje del código: CSS (css)

Este ejemplo es equivalente a usar grid-gap: 10px 20px;, pero es más explícito.

REPESENTACIÓN VISUAL DEL EJEMPLO:

3.6. Grid-auto-rows / Grid-auto-columns

Las propiedades grid-auto-rows y grid-auto-columns en CSS Grid se encargan de definir el comportamiento predeterminado del tamaño de las filas y columnas, respectivamente, cuando no se especifica un tamaño explícito mediante grid-template-rows o grid-template-columns.

3.6.1. grid-auto-rows:

grid-auto-rows define el tamaño de las filas que se generan automáticamente cuando se añaden más elementos a la cuadrícula de los que caben en las filas definidas explícitamente.

VALORES POSIBLES:

• auto: Las filas se ajustarán automáticamente al contenido que contengan.
• Valor fijo (px, em, rem, etc.): Define un tamaño fijo predeterminado para las filas sin tamaño explícito.
• Porcentaje (%): Establece un porcentaje del contenedor padre como tamaño predeterminado para las filas sin tamaño explícito.
• min-content: La fila se ajustará al tamaño mínimo necesario para contener su contenido.
• max-content: La fila se ajustará al tamaño máximo necesario para contener su contenido.
• fr (unidad fraccional): Distribuye el espacio restante entre las filas que no tienen un tamaño definido de forma proporcional.

EJEMPLO:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* Define tamaño para las primeras columnas */
  grid-auto-rows: auto; /* Filas se ajustan al contenido */
}Lenguaje del código: CSS (css)

En este caso:

• Las primeras dos columnas tienen un tamaño definido de 1 unidad fraccional y 2 unidades fraccionales respectivamente.
• La propiedad grid-auto-rows: auto; indica que las filas restantes se ajustarán automáticamente al tamaño de su contenido.

3.6.2. grid-auto-columns:

grid-auto-columns define el tamaño de las columnas que se generan automáticamente cuando se añaden más elementos a la cuadrícula de los que caben en las columnas definidas explícitamente.

VALORES POSIBLES:

Similar a grid-auto-rows, acepta los mismos valores para definir el comportamiento predeterminado del tamaño de las columnas sin tamaño explícito.

EJEMPLO:

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 100px);  /* Define tamaño para las primeras filas */
  grid-auto-columns: 200px; /* Columnas sin tamaño tendrán 200px */
}Lenguaje del código: CSS (css)

Aquí:

• Las primeras dos filas tienen un tamaño fijo de 100px utilizando repeat.
• La propiedad grid-auto-columns: 200px; indica que las columnas restantes tendrán un tamaño predeterminado de 200px.

Uso conjunto y casos especiales:

• grid-auto-rows y grid-auto-columns trabajan en conjunto para definir el comportamiento predeterminado de todas las filas y columnas de la cuadrícula.
• Si se definen todas las filas o columnas con tamaños explícitos, estas propiedades no tienen efecto.
• Ten en cuenta que grid-auto-rows solo se aplica cuando hay un número indefinido de filas (auto-fit) o cuando el contenido excede el espacio disponible en las filas definidas.
• Lo mismo sucede con grid-auto-columns, que solo se aplica cuando hay un número indefinido de columnas o cuando el contenido excede el espacio disponible en las columnas definidas.

3.6.3. Ejemplo de grid-auto-rows y grid-auto-columns:

Aquí proporcionamos un ejemplo sencillo para entender cómo funcionan las propiedades grid-auto-rows y grid-auto-columns en CSS Grid.

Estas propiedades se utilizan para establecer el tamaño de las filas y columnas que se crean automáticamente cuando se añaden más elementos a la cuadrícula que los especificados en grid-template-rows y grid-template-columns.

ESTRUCTURA HTML CON 6 ELEMENTOS HIJOS (GRID ITEMS)

REGLAS GRID CSS

EXPLICACIÓN de estos códigos:

1. HTML: Creamos un contenedor .grid-container y seis elementos .grid-item.
2. CSS:
   • grid-template-columns: 100px 200px; define dos columnas, la primera de 100px y la segunda de 200px.
   • grid-template-rows: 100px; define una fila de 100px.
   • grid-auto-columns: 150px; define que cualquier columna creada automáticamente tendrá un ancho de 150px.
   • grid-auto-rows: 50px; define que cualquier fila creada automáticamente tendrá una altura de 50px.
   • gap: 10px; agrega un espacio de 10px entre las celdas de la cuadrícula.

AMPLIACIÓN de la explicación anterior:

Este ejemplo crea una cuadrícula inicial de dos columnas y una fila. Sin embargo, como hay más elementos (6 GRID items en el HTML) que espacios definidos en la cuadrícula, CSS Grid creará automáticamente nuevas filas y columnas según sea necesario.

• La primera fila tendrá dos columnas: la primera de 100px y la segunda de 200px.
• Los elementos adicionales (más allá del segundo) generarán automáticamente nuevas filas de 50px de alto (según grid-auto-rows).
• Si se necesitan más columnas, se crearán columnas automáticas de 150px de ancho (según grid-auto-columns).

VISUALIZACIÓN DE LA CUADRÍCULA:

1. Elementos 1 y 2 estarán en la primera fila, ocupando las dos columnas definidas y con una anchura de columna definida en grid-template-column (100px y 200px) y un altura de fila definida en grid-template-row (100px).
2. Elemento 3 y 4 estarán en la segunda fila automática (porque no se definieron mas filas en grid-template-row), y con la altura definida en grid-auto-rows: 50px;). Pero si siguen manteniendo la anchura de columna de grid-template-column (100px y 200px).
3. Elemento 5 y 6 estará en la tercera fila, con el mismo comportamiento de los elementos 3 y 4.

Este ejemplo debería darte una idea clara de cómo usar grid-auto-rows y grid-auto-columns para manejar elementos adicionales en una cuadrícula CSS.

EN RESUMEN:

grid-auto-rows y grid-auto-columns te brindan control sobre el tamaño predeterminado de las filas y columnas en tu diseño CSS Grid. Puedes utilizar valores fijos, unidades flexibles o permitir el ajuste automático según tus necesidades. Comprender estas propiedades es fundamental para crear layouts adaptables y dinámicos.

3.7. Grid-auto-flow

La propiedad grid-auto-flow en CSS Grid se utiliza para controlar cómo se colocan automáticamente los elementos en la cuadrícula cuando no se especifican explícitamente sus posiciones (con grid-template-columns y grid-template-row).

Esta propiedad es esencial para gestionar el comportamiento de los elementos que se agregan a la cuadrícula de forma dinámica o cuando el diseño del grid no define claramente todas las posiciones de los elementos.

3.7.1. Sintaxis:

Entonces, cuando no se especifica concretamente las posiciones de las celdas que tendrán los elementos hijos dentro del contenedor con grid-template-columns y grid-template-row, lo podemos realizar con esta propiedad de grid-auto-flow. Usando la sintaxis anterior con alguno de esos valores lo cuales explicamos a continuación:

3.7.2. Explicación de los valores de grid-auto-flow:

ROW: Este es el valor por defecto. Los elementos se colocan automáticamente en el grid por filas. Si una fila se llena, los elementos se colocan en la siguiente fila disponible.

.grid-container {
    display: grid;
    grid-auto-flow: row;
}Lenguaje del código: CSS (css)

Ejemplo visual de row:

COLUMN: Los elementos se colocan automáticamente en el grid por columnas. Si una columna se llena, los elementos se colocan en la siguiente columna disponible.

.grid-container {
    display: grid;
    grid-auto-flow: column;
}Lenguaje del código: CSS (css)

Ejemplo visual column:

DENSE: Este valor intenta llenar los huecos en el grid de manera más compacta. Busca el siguiente espacio disponible sin dejar huecos, compactando los elementos hacia arriba y hacia la izquierda lo más posible.

.grid-container {
    display: grid;
    grid-auto-flow: dense;
}Lenguaje del código: CSS (css)

ROW DENSE: Combina el flujo por filas con el comportamiento denso. Los elementos se colocan por filas pero intentando llenar los huecos disponibles.

.grid-container {
    display: grid;
    grid-auto-flow: row dense;
}Lenguaje del código: CSS (css)

COLUMN DENSE: Combina el flujo por columnas con el comportamiento denso. Los elementos se colocan por columnas pero intentando llenar los huecos disponibles.

.grid-container {
    display: grid;
    grid-auto-flow: column dense;
}Lenguaje del código: CSS (css)

3.8. Align-items y Justify-items.

Las propiedades align-items y justify-items en CSS Grid se utilizan para alinear los elementos DENTRO de las celdas del contenedor GRID. Estas propiedades permiten controlar la alineación tanto vertical (con align-items) como horizontal (con justify-items). A continuación, se detallan estas propiedades y cómo se utilizan.

3.8.1. Align-items:

La propiedad align-items se usa para alinear los elementos DENTRO de sus celdas en el eje vertical (de arriba a abajo). Afecta a todos los elementos hijos dentro del contenedor grid.

VALORES COMUNES:

• start: Alinea los elementos al inicio del contenedor.
• end: Alinea los elementos al final del contenedor.
• center: Alinea los elementos en el centro del contenedor.
• stretch: Estira los elementos para llenar el contenedor (valor por defecto).

3.8.2. Justify-items:

La propiedad justify-items se usa para alinear los elementos DENTRO de sus celdas en el eje horizontal (de izquierda a derecha). Afecta a todos los elementos hijos dentro del contenedor grid.

VALORES COMUNES:

• start: Alinea los elementos al inicio del contenedor.
• end: Alinea los elementos al final del contenedor.
• center: Alinea los elementos en el centro del contenedor.
• stretch: Estira los elementos para llenar el contenedor (valor por defecto).

3.8.3. Ejemplo de uso de ambas propiedades Align-items y Justify-items:

Puedes usar align-items y justify-items juntos para controlar la alineación de los elementos hijos tanto vertical como horizontalmente.

VISUALIZACIÓN EN NAVEGADOR:

Explicación de align-items y justify-items en el ejemplo:

El celeste de fondo en la imagen corresponde al contenedor, los cuadros entre líneas cortadas serían las celdas del GRID, y los números serían el contenido dentro de las celdas.

Teniendo en cuenta esto, el comportamiento que generan estas propiedades son las siguientes

• Align-items: En este ejemplo, todos los elementos DENTRO (números en este caso) de las celdas del grid se alinearán verticalmente en el centro de sus respectivas celdas.
• justify-items: En este ejemplo, todos los elementos DENTRO (números en este caso) de las celdas del grid se alinearán horizontalmente en el centro de sus respectivas celdas.

3.9. Align-content y Justify-content.

Las propiedades align-content y justify-content en CSS Grid se utilizan para alinear las CELDAS (no el contenido dentro de ellas) que forman las filas y columnas del contenedor grid como un todo cuando hay espacio extra en el contenedor (o sea, alinean las celdas propiamente pero no el contenido dentro de ellos).

3.9.1. Align-content:

La propiedad align-content se utiliza para alinear el conjunto de CELDAS (no el contenido) que forman las filas del contenedor grid a lo largo del eje vertical (de arriba a abajo). Afecta al conjunto de filas como un todo, no a los elementos individuales.

VALORES COMUNES:

• start: Alinea las filas al inicio del contenedor.
• end: Alinea las filas al final del contenedor.
• center: Alinea las filas en el centro del contenedor.
• stretch: Estira las filas para llenar el contenedor verticalmente.
• space-between: Distribuye las filas con el máximo espacio posible entre ellas.
• space-around: Distribuye las filas con espacio igual alrededor de cada fila.
• space-evenly: Distribuye las filas con espacio igual entre ellas y alrededor de ellas.

3.9.2. Justify-content:

La propiedad justify-content se utiliza para alinear el conjunto de CELDAS (no el contenido) que forman las columnas del contenedor grid a lo largo del eje horizontal (de izquierda a derecha). Afecta al conjunto de columnas como un todo, no a los elementos individuales.

VALORES COMUNES:

• start: Alinea las columnas al inicio del contenedor.
• end: Alinea las columnas al final del contenedor.
• center: Alinea las columnas en el centro del contenedor.
• stretch: Estira las columnas para llenar el contenedor horizontalmente.
• space-between: Distribuye las columnas con el máximo espacio posible entre ellas.
• space-around: Distribuye las columnas con espacio igual alrededor de cada columna.
• space-evenly: Distribuye las columnas con espacio igual entre ellas y alrededor de ellas.

3.9.3. Ejemplo de uso de ambas propiedades align-content y justify-content:

Puedes usar align-content y justify-content juntos para controlar la alineación de las filas y columnas del grid como un todo.

VISUALIZACIÓN EN NAVEGADOR:

Explicación de align-content y justify-content en el ejemplo:

La parte más clara de la imagen anterior corresponde al contenedor y los bloques lila son los elementos hijos (celdas) y los números serian el contenido de las celdas.

1. justify-content: space-evenly:
   • Los elementos 1, 2, 3 en la primera fila y 4, 5, 6 en la segunda fila estarán distribuidos con espacio igual entre todas las columnas y los bordes del contenedor.
2. align-content: center:
   • Las dos filas estarán agrupadas en el centro del contenedor verticalmente.
   • Habrá espacio igual en la parte superior e inferior del contenedor.

4. Propiedades GRID CSS de los Elementos Hijos (Grid Items).

El contenedor Grid define la estructura general y el posicionamiento de las áreas, mientras que las PROPIEDADES aplicadas a los ELEMENTOS HIJOS permiten ajustar su colocación y alineación dentro del grid.

Estas propiedades que podemos usar en los «GRID Items» son:

1. Grid-area:
2. Grid-column.
3. Grid-row.
4. Align-self / Justify-self.

4.1. Grid-area:

La propiedad grid-area para elementos hijos en CSS Grid se utiliza para especificar la ubicación y el tamaño de un elemento (celda) en la cuadrícula (contenedor).

Puede definirse de dos maneras principales:

1. Asignar un nombre a un área del grid que luego se usa en grid-template-areas.
2. Especificar directamente la posición y el tamaño de un elemento dentro de la cuadrícula.

4.1.1. Asignar un nombre a un área del grid:

Esta manera de usar grid-area se usa en combinación con la propiedad grid-template-areas (esta propiedad se usa en el contenedor), la cual ya explicamos a profundidad en el punto 3.4.

EN RESUMIDAS PALABRAS:

Primero, asignamos un nombre a un área del grid usando grid-area en un elemento hijo. Luego, utilizamos grid-template-areas en el contenedor grid para definir el diseño de la cuadrícula.

Ejemplo:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}Lenguaje del código: CSS (css)

En este ejemplo, hemos creado una cuadrícula de 3 columnas y 3 filas. Usando grid-template-areas, hemos definido el diseño de la cuadrícula, asignando áreas específicas para el encabezado (header), la barra lateral (sidebar), el contenido (content) y el pie de página (footer). Los elementos hijos utilizan la propiedad grid-area para ubicarse en las áreas definidas.

4.1.2. Especificar directamente la posición y el tamaño:

La propiedad grid-area también se puede utilizar para definir directamente (sin combinar con grid-template-areas) la posición y el tamaño de un elemento en la cuadrícula. Se define usando cuatro valores: la línea de inicio de fila, la línea de inicio de columna, la línea de fin de fila y la línea de fin de columna.

SINTAXIS:

Explicación de cada valor:

1. row-start:
   • Define la línea de inicio en la que el borde superior del elemento se alinea.
2. column-start:
   • Define la columna de inicio en la que el borde izquierdo del elemento se alinea.
3. row-end:
   • Define la línea de fin en la que el borde inferior del elemento se alinea.
4. column-end:
   • Define la columna de fin en la que el borde derecho del elemento se alinea.

EJEMPLO DE grid-area USANDO DIRECTAMENTE:

Supongamos que tenemos las siguientes reglas GRID CSS, aplicando gird-area directamente el los «grid-items»:

Visualización del ejemplo:

Explicación del ejemplo:

• item1 Ocupa desde la primera fila/columna hasta la tercera fila/cuarta columna.
• item2 Ocupa desde la tercera fila/primera columna hasta la cuarta fila/segunda columna
• item3 Ocupa desde la tercera fila/segunda columna hasta la cuarta fila/cuarta columna

4.2. Grid-column.

La propiedad grid-column se utiliza en CSS Grid para definir la ubicación de un elemento hijo (celda) en relación con las columnas del grid. Permite especificar en qué columna debe comenzar y en qué columna debe terminar el elemento.

Esta propiedad puede ser utilizada de dos maneras:

1. Con valores individuales (grid-column-start y grid-column-end).
2. Como una abreviatura que combina ambos valores.

4.2.1. Usando grid-column con valores individuales:

Significa que puedo aplicar el comportamiento de esta propiedad usando las siguientes sintaxis en elementos GRID ITEMS:

• grid-column-start: Define la línea de inicio de la columna donde el elemento debe comenzar.
• grid-column-end: Define la línea de fin de la columna donde el elemento debe terminar.

EJEMPLO DE USO CON VALORES INDIVIDUALES:

VISUALIZACÓN:

En este ejemplo:

• item1 Ocupa desde la columna 1 hasta la columna 3.
• item2 Ocupa desde la columna 3 hasta la columna 5.
• item3 Ocupa desde la columna 1 hasta la columna 5.

4.2.2. Usando grid-column como una abreviatura:

La propiedad grid-column es una abreviatura que combina grid-column-start y grid-column-end.

La SINTAXIS es la siguiente: grid-column: start / end;

EJEMPLO:

En este ejemplo, item1, item2 y item3 ocupan las mismas posiciones que en el ejemplo anterior, pero utilizando la sintaxis abreviada.

4.2.3. Usar span en grid-column

Puedes usar la palabra clave span para que un elemento ocupe un número específico de columnas.

EJEMPLO:

COMPORTAMIENTO DEL EJEMPLO CON SPAN: El comportamiento es el mismo que los dos ejemplos anteriores solo que ahora usando el valor span.

• item1 Ocupa dos columnas comenzando desde la primera columna,
• item2 Ocupa dos columnas terminando en la quinta columna
• item3 Ocupa todas las columnas.

4.3. Grid-row.

La propiedad grid-row en CSS Grid se utiliza para definir la ubicación de un elemento hijo (celda) en relación con las filas del grid. Permite especificar en qué fila debe comenzar y en qué fila debe terminar el elemento

(IGUAL QUE grid-column SOLO QUE APLCADO A LAS CELDAS QUE FORMAN LAS FILAS) .

Esta propiedad puede ser utilizada de dos maneras:

1. Con valores individuales (grid-row-start y grid-row-end).
2. Como una abreviatura que combina ambos valores.

4.3.1. Valores individuales

1. grid-row-start: Define la línea de inicio de la fila donde el elemento debe comenzar.
2. grid-row-end: Define la línea de fin de la fila donde el elemento debe terminar.

4.3.2. Sintaxis abreviada

La propiedad grid-row es una abreviatura que combina grid-row-start y grid-row-end. La sintaxis es la siguiente:

4.3.3. Ejemplo aplicando sintaxis abreviada:

VISUALIZACÓN:

EXPLICACIÓN DEL EJEMPLO:

• item1 Ocupa desde la fila 1 hasta la fila 3.
• item2 Ocupa desde la fila 3 hasta la fila 5.
• item3 Ocupa desde la fila 2 hasta la fila 4.

4.3.3. Usar span en grid-row

Puedes usar la palabra clave span para que un elemento ocupe un número específico de filas. Al igual que como explicamos con la propiedad grid.column.

4.4. Align-self / Justify-self.

Las propiedades align-self y justify-self en CSS Grid se utilizan para alinear elementos hijos dentro de sus celdas (el contenido de dichas celdas) de cuadrícula de forma individual. Mientras que align-self controla la alineación vertical, justify-self controla la alineación horizontal.

Estas propiedades permiten un control fino sobre la disposición de los elementos dentro de su espacio asignado en la cuadrícula, independientemente de la alineación global definida por el contenedor (con align-items / align-content / justify-items / justify-content).

4.4.1. align-self:

align-self se utiliza para alinear el CONTENIDO dentro de un elemento hijo a lo largo del eje vertical dentro de su celda individual de cuadrícula (en el punto 4.4.3. dejamos un ejemplo para entender su comportamiento).

VALORES POSIBLES:

• start: Alinea el elemento al inicio de la celda (parte superior).
• end: Alinea el elemento al final de la celda (parte inferior).
• center: Alinea el elemento al centro de la celda.
• stretch: Estira el elemento para llenar completamente la celda verticalmente (valor por defecto).

4.4.2. justify-self:

justify-self se utiliza para alinear el CONTENIDO de un elemento hijo a lo largo del eje horizontal dentro de su celda individual de cuadrícula (en el punto 4.4.3. dejamos un ejemplo para entender su comportamiento).

VALORES POSIBLES:

• start: Alinea el elemento al inicio de la celda (lado izquierdo).
• end: Alinea el elemento al final de la celda (lado derecho).
• center: Alinea el elemento al centro de la celda.
• stretch: Estira el elemento para llenar completamente la celda horizontalmente (valor por defecto).

4.4.3. Ejemplo usando Align-self / Justify-self:

Puedes combinar align-self con otras propiedades de alineación como justify-self para controlar tanto la alineación vertical como la horizontal de un elemento dentro de su celda.

SUPONGAMOS QUE TENEMOS EL SIGUIENTE HTML:

Y EL GRID CSS:

NOS DA LA SIGUIENTE VISUALIZACIÓN:

EXPLICACIÓN DEL EJEMPLO: En este ejemplo, cada elemento se alinea tanto vertical como horizontalmente de manera diferente dentro de su celda:

Propiedades del contendedor:

• display: grid;:
  • Define que el contenedor .grid-container utilizará CSS Grid.
• grid-template-columns: repeat(3, 1fr);:
  • Crea tres columnas de igual ancho que se dividirán equitativamente (1fr cada una) dentro del ancho total del contenedor.
• grid-template-rows: repeat(3, 100px);:
  • Crea tres filas, cada una con una altura fija de 100px.

Propiedades de los GRID ITEMS:

• item1
  • Se alinea el contenido DENTRO de la celda correspondiente al inicio de la celda vertical y horizontalmente.
• item2
  • Se alinea el contenido DENTRO de la celda correspondiente al final de la celda vertical y horizontalmente.
• item3
  • Se alinea el contenido DENTRO de la celda correspondiente al centro de la celda vertical y horizontalmente.
• item4
  • Se estira el contenido DENTRO de la celda correspondiente para llenar completamente (dentro de las posibilidades del contenido) la celda tanto vertical como horizontalmente.

5. Ejemplo completo usando las propiedades GRID CSS.

INVITACIÓN: Te invito a realizar este ejercicio siguiendo los pasos del punto 5 del siguiente enlace sobre como instalar y usa VSCode.

Supongamos que tenemos la siguiente estructura HTML y CSS:

ESTRUCTURA HTML:

<div class="grid-container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
    <div class="item4">Item 4</div>
    <div class="item5">Item 5</div>
    <div class="item6">Item 6</div>
    <div class="item7">Item 7</div>
    <div class="item8">Item 8</div>
    <div class="item9">Item 9</div>
</div>Lenguaje del código: HTML, XML (xml)

ESTRUCTURA GRID CSS:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px 100px;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    gap: 10px; 
    row-gap: 20px; 
    column-gap: 15px;
    align-items: center; 
    justify-items: center; 
    align-content: center; 
    justify-content: center; 
    background-color: aquamarine;
}

.item1 {
    grid-area: header;
    align-self: start;
    justify-self: start;
    background-color: blue;
}

.item2 {
    grid-area: sidebar;
    align-self: end;
    justify-self: end;
    background-color: blueviolet;
}

.item3 {
    grid-area: main;
    align-self: center;
    justify-self: center;
    background-color: white;
}

.item4 {
    grid-area: main;
    align-self: stretch;
    justify-self: stretch;
    background-color: brown;
}

.item5 {
    grid-area: main;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: midnightblue;
}

.item6 {
    grid-area: main;
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    background-color: green;
}

.item7 {
    grid-area: main;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: yellow;
}

.item8 {
    grid-area: footer;
    align-self: start;
    justify-self: center;
    background-color: fuchsia;
}

.item9 {
    grid-area: footer;
    align-self: end;
    justify-self: center;
    background-color: grey;
}Lenguaje del código: CSS (css)

COPIA Y PEGA ESTOS HTML Y CSS EN LOS RESPECTIVOS ESPACIOS DEL SIGUIENTE BLOQUE:

See the Pen Untitled by MANUEL OLOCCO (@MANUEL-OLOCCO) on CodePen.

EXPLICACIÓN DE LAS PROPIEDADES GRID CSS DEL EJEMPLO:

Propiedades GRID aplicadas al contenedor:

• display: grid: Establece el contenedor como una cuadrícula.
• grid-template-columns: Define tres columnas con tamaños proporcionales (1fr, 2fr, 1fr).
• grid-template-rows: Define tres filas con alturas específicas (100px, 200px, 100px).
• grid-template-areas: Asigna nombres a las áreas de la cuadrícula para facilitar la colocación de los elementos.
• gap: Establece un espacio de 10px entre las celdas.
• row-gap y column-gap: Establecen espacios específicos entre filas y columnas respectivamente.
• align-items y justify-items: Alinean todo el contenido dentro de los elementos hijos al centro de sus celdas, vertical y horizontalmente (de manera general, después individualmente se puede modificar este comportamiento).
• align-content y justify-content: Alinean todo el contenido del grid al centro del contenedor, vertical y horizontalmente (de manera general, después individualmente se puede modificar este comportamiento).

Propiedades GRID aplicadas a elementos hijos (Grid Items):

• grid-area: Asigna el elemento a una de las áreas definidas en grid-template-areas.
• align-self y justify-self: Alinean individualmente cada elemento hijo dentro de su celda.
• grid-column y grid-row: Definen en qué columnas y filas debe ubicarse un elemento, permitiendo que se extienda sobre varias celdas si es necesario.

EXPLICACIÓN DEL COMPORTAMIENTO VISUAL DE ESTE EJEMPLO:

Contenedor de cuadrícula.

• grid-template-columns: 1fr 2fr 1fr;: Define tres columnas. La segunda columna es el doble de ancha que las otras dos.
• grid-template-rows: 100px 200px 100px;: Define tres filas. La segunda fila es el doble de alta que las otras dos.
• grid-template-areas: Define un layout de áreas nombradas:
  • header: Ocupa toda la primera fila.
  • sidebar: Ocupa la primera columna de la segunda fila.
  • main: Ocupa la segunda y tercera columna de la segunda fila.
  • footer: Ocupa toda la tercera fila.

Elementos de cuadrícula:

• Item 1 (item1):
  • Área: header.
  • Alineación: al inicio tanto horizontal como verticalmente.
  • Color de fondo: azul.
• Item 2 (item2):
  • Área: sidebar.
  • Alineación: al final tanto horizontal como verticalmente.
  • Color de fondo: azul violeta.
• Item 3 (item3):
  • Área: main.
  • Alineación: centrado tanto horizontal como verticalmente.
  • Color de fondo: blanco.
• Item 4 (item4):
  • Área: main.
  • Alineación: estirada tanto horizontal como verticalmente.
  • Color de fondo: marrón.
• Item 5 (item5):
  • Columna: 2 a 3 en la segunda fila.
  • Color de fondo: azul medianoche.
• Item 6 (item6):
  • Columna: 3 a 4 y filas 2 a 4.
  • Color de fondo: verde.
• Item 7 (item7):
  • Columna: 1 a 2 en la tercera fila.
  • Color de fondo: amarillo.
• Item 8 (item8):
  • Área: footer.
  • Alineación: al inicio vertical y centrado horizontal.
  • Color de fondo: fucsia.
• Item 9 (item9):
  • Área: footer.
  • Alineación: al final vertical y centrado horizontal.
  • Color de fondo: gris.

NOTAS ADICIONALES:

• gap: 10px;: Define un espacio de 10px entre todas las celdas de la cuadrícula.
• row-gap: 20px; y column-gap: 15px;: Ajustan los espacios entre filas y columnas respectivamente.
• align-items: center; y justify-items: center;: Centran todos los elementos dentro de sus celdas tanto horizontal como verticalmente, a menos que se sobrescriba por una propiedad específica como align-self o justify-self.
• align-content: center; y justify-content: center;: Centran todo el contenido de la cuadrícula dentro del contenedor de cuadrícula.

Este código CSS crea una disposición compleja y bien organizada utilizando las áreas de cuadrícula y propiedades de alineación para posicionar y estilizar los elementos dentro del contenedor de cuadrícula.

6. Resumen de propiedades más usadas del contenedor Grid y los Grid Items.

Propiedades del contenedor Grid:

1. Propiedades esenciales:

• display: grid: Convierte un elemento en un contenedor de cuadrícula.
• grid-template-columns: Define las columnas de la cuadrícula.
• grid-template-rows: Define las filas de la cuadrícula.
• grid-gap: Define el espacio entre las celdas de la cuadrícula.
• grid-template-areas: Define las áreas de la cuadrícula nombrando cada celda.

2. Propiedades para el comportamiento de la cuadrícula:

• grid-auto-rows: Define el tamaño automático de las filas de la cuadrícula.
• grid-auto-columns: Define el tamaño automático de las columnas de la cuadrícula.
• justify-content: Controla la alineación horizontal del contenido dentro de las celdas.
• align-items: Controla la alineación vertical del contenido dentro de las celdas.
• align-content: Controla la alineación del contenido dentro de las áreas de la cuadrícula.
• grid-column-gap: Define el espacio entre las columnas de la cuadrícula.
• grid-row-gap: Define el espacio entre las filas de la cuadrícula.

3. Propiedades para el orden de las filas y columnas:

• grid-order: Define el orden en que se mostrarán las columnas o filas de la cuadrícula.
• grid-start: Define el punto de inicio de una celda o área dentro de la cuadrícula.
• grid-end: Define el punto final de una celda o área dentro de la cuadrícula.

Propiedades de los Grid Items:

1. Propiedades para posicionamiento:

• grid-area: Define el área que ocupa un elemento dentro de la cuadrícula.
• grid-column: Define la columna en la que se coloca un elemento.
• grid-row: Define la fila en la que se coloca un elemento.
• grid-column-start: Define el punto de inicio de la columna que ocupa un elemento.
• grid-column-end: Define el punto final de la columna que ocupa un elemento.
• grid-row-start: Define el punto de inicio de la fila que ocupa un elemento.
• grid-row-end: Define el punto final de la fila que ocupa un elemento.

2. Propiedades para el tamaño:

• width: Define el ancho del elemento.
• height: Define la altura del elemento.
• min-width: Define el ancho mínimo del elemento.
• max-width: Define el ancho máximo del elemento.
• min-height: Define la altura mínima del elemento.
• max-height: Define la altura máxima del elemento.

3. Propiedades para la alineación:

• justify-self: Controla la alineación horizontal del contenido dentro del elemento.
• align-self: Controla la alineación vertical del contenido dentro del elemento.

4. Propiedades para el orden:

• order: Define el orden en que se mostrará el elemento dentro de su fila o columna.

7. Preguntas frecuentes y resumen sobre GRID CSS.