El podcast de CSS - 011: Grid
Un diseño muy común en el diseño web es el diseño de encabezado, barra lateral, cuerpo y pie de página.
A lo largo de los años, ha habido muchos métodos para resolver este diseño, pero con la cuadrícula de CSS, no solo es relativamente sencillo, sino que tienes muchas opciones. La cuadrícula es excepcionalmente útil para combinar el control que proporciona el tamaño extrínseco con la flexibilidad del tamaño intrínseco, lo que lo hace ideal para este tipo de diseño. Esto se debe a que la cuadrícula es un método de diseño diseñado para contenido bidimensional. Es decir, dispones elementos en filas y columnas al mismo tiempo.
Al crear un diseño de cuadrícula, debes definir una cuadrícula con filas y columnas. A continuación, colocas los elementos en esa cuadrícula o permites que el navegador los ubique automáticamente en las celdas que creaste. Hay muchas cuadrículas, pero con una visión general de lo que está disponible, crearás diseños de cuadrícula en muy poco tiempo.
Descripción general
Entonces, ¿qué puedes hacer con la cuadrícula? Los diseños de cuadrícula tienen las siguientes características. Aprenderás sobre todos ellos en esta guía.
- Una cuadrícula se puede definir con filas y columnas. Puedes elegir cómo ajustar el tamaño de los seguimientos de filas y columnas o reaccionar al tamaño del contenido.
- Los elementos secundarios directos del contenedor de cuadrícula se posicionarán automáticamente en esta cuadrícula.
- O bien, puedes colocar los elementos en la ubicación exacta que desees.
- Se puede asignar un nombre a las líneas y áreas de la cuadrícula para facilitar su ubicación.
- El espacio libre en el contenedor de cuadrículas se puede distribuir entre los segmentos.
- Los elementos de cuadrícula se pueden alinear dentro de su área.
Terminología de cuadrícula
La cuadrícula incluye muchos términos nuevos, ya que es la primera vez que CSS tiene un sistema de diseño real.
Líneas de cuadrícula
Una cuadrícula se compone de líneas que se ejecutan horizontal y verticalmente. Si tu cuadrícula tiene cuatro columnas, tendrá cinco líneas de columna, incluida la que está después de la última columna.
Las líneas se numeran a partir del 1, con la numeración que sigue el modo de escritura y la dirección de la secuencia de comandos del componente. Esto significa que la línea de columna 1 estará a la izquierda en un idioma de izquierda a derecha, como el inglés, y a la derecha, en un idioma de derecha a izquierda, como el árabe.
Pistas de cuadrícula
Un recorrido es el espacio entre dos líneas de la cuadrícula. Un seguimiento de fila está entre dos líneas de fila y un seguimiento de columnas entre dos líneas de columna. Cuando creamos la cuadrícula, creamos estas pistas asignándoles un tamaño.
Celda de cuadrícula
Una celda de cuadrícula es el espacio más pequeño en una cuadrícula y se define por la intersección de los seguimientos de filas y columnas. Es como una celda o una celda de una tabla en una hoja de cálculo. Si defines una cuadrícula y no colocas ninguno de los elementos, se distribuirán automáticamente un elemento en cada celda de la cuadrícula definida.
Área de cuadrícula
Varias celdas de la cuadrícula juntas. Para crear áreas de cuadrícula, se genera un elemento que abarque varias pistas.
Vacíos
Un margen o pasaje entre las vías Para definir el tamaño, funcionan como las pistas normales. No puedes colocar contenido en un espacio, pero puedes abarcar elementos de la cuadrícula.
Contenedor de cuadrícula
Es el elemento HTML al que se aplicó display: grid y, por lo tanto, crea un nuevo contexto de formato de cuadrícula para los elementos secundarios directos.
.container {
display: grid;
}
Elemento de la cuadrícula
Un elemento de la cuadrícula es un elemento que es un elemento secundario directo del contenedor de la cuadrícula.
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Filas y columnas
Para crear una cuadrícula básica, puedes definir una cuadrícula con tres seguimientos de columnas, dos seguimientos de filas y un espacio de 10 píxeles entre los segmentos, de la siguiente manera.
.container {
display: grid;
grid-template-columns: 5em 100px 30%;
grid-template-rows: 200px auto;
gap: 10px;
}
En esta cuadrícula, se muestran muchos de los elementos descritos en la sección de terminología. Tiene tres pistas de columna. Cada pista utiliza una unidad de longitud diferente. Tiene dos seguimientos de filas, uno con una unidad de longitud y el otro con forma automática. Cuando se usa como pista, el tamaño de la pista se puede considerar tan grande como el contenido. De forma predeterminada, el tamaño de las pistas se ajusta automáticamente.
Si el elemento con una clase .container tiene elementos secundarios, se diseñarán inmediatamente en esta cuadrícula. Puedes ver cómo funciona en la siguiente demostración.
La superposición de la cuadrícula en las Herramientas para desarrolladores de Chrome puede ayudarlo a comprender las distintas partes de la cuadrícula.
Abre la demostración en Chrome.
Inspecciona el elemento con el fondo gris, que tiene un ID de container.
Para destacar la cuadrícula, selecciona la insignia de la cuadrícula en el DOM, junto al elemento .container.
Dentro de la pestaña Diseño, selecciona Mostrar números de línea en el menú desplegable para ver los números de línea en la cuadrícula.
Palabras clave de tamaño intrínseco
Además de las dimensiones de longitud y porcentaje, como se describe en la sección sobre unidades de tamaño, los segmentos de cuadrícula pueden usar palabras clave intrínsecas de tamaño. Estas palabras clave se definen en la especificación de tamaño de cuadros y agregan métodos adicionales para ajustar el tamaño de los cuadros en CSS, no solo en los segmentos de la cuadrícula.
min-contentmax-contentfit-content()
La palabra clave min-content hará que la pista sea lo más pequeña posible sin desbordar su contenido.
Cambiar el diseño de cuadrícula de ejemplo para que tenga tres seguimientos de columnas con un tamaño de min-content implica que se volverán tan angostos como la palabra más larga del segmento.
La palabra clave max-content tiene el efecto contrario.
La pista será lo suficientemente ancha para que todo el contenido se muestre en una sola cadena larga y continua.
Esto podría provocar desbordamientos, ya que la cadena no se unirá.
La función fit-content() actúa como max-content al principio.
Sin embargo, una vez que el segmento alcanza el tamaño que pasas a la función, el contenido comienza a ajustarse.
Por lo tanto, fit-content(10em) creará una pista de menos de 10 em, si el tamaño de max-content es menor que 10 em, pero nunca superior a 10.
En la siguiente demostración, prueba las diferentes palabras clave de tamaño intrínseco. Para ello, cambia el tamaño de las pistas de la cuadrícula.
La unidad fr
Ya tenemos dimensiones de longitud, porcentajes y estas palabras clave nuevas.
También hay un método de tamaño especial que solo funciona en el diseño de cuadrícula.
Esta es la unidad fr, una longitud flexible que describe una parte del espacio disponible en el contenedor de cuadrícula.
La unidad fr funciona de manera similar al uso de flex: auto en flexbox.
Distribuye el espacio después de que se han dispuesto los elementos.
Por lo tanto, para tener tres columnas que obtengan la misma parte del espacio disponible:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
A medida que la unidad fr comparte el espacio disponible, se puede combinar con un intervalo de tamaño fijo o pistas de tamaño fijo.
Para tener un componente con un elemento de tamaño fijo y la segunda pista ocupa el espacio restante, puedes usarlo como lista de pistas de grid-template-columns: 200px 1fr.
El uso de valores diferentes para la unidad fr compartirá el espacio proporcionalmente. Los valores más altos obtienen una mayor parte del espacio libre. En la siguiente demostración, cambia el valor de la tercera pista.
La función minmax()
Esta función permite establecer un tamaño mínimo y uno máximo para un segmento.
Esto puede ser bastante útil.
Si tomamos el ejemplo de la unidad fr anterior que distribuye el espacio restante, se podría escribir con minmax() como minmax(auto, 1fr).
La cuadrícula analiza el tamaño intrínseco del contenido y distribuye el espacio disponible después de darle suficiente espacio al contenido.
Esto significa que es posible que no obtengas segmentos que tengan una parte igual de todo el espacio disponible en el contenedor de cuadrícula.
Para forzar a un recorrido a ocupar la misma parte del espacio en el contenedor de la cuadrícula menos los espacios, usa el mínimo.
Reemplaza 1fr como tamaño de segmento por minmax(0, 1fr).
De esta manera, el tamaño mínimo de la pista será 0 y no el tamaño mínimo del contenido.
Luego, la cuadrícula tomará todo el tamaño disponible en el contenedor, deducirá el tamaño necesario para cualquier brecha y compartirá el resto según tus unidades fr.
Notación repeat()
Si deseas crear una cuadrícula de seguimiento de 12 columnas con columnas iguales, puedes usar el siguiente CSS.
.container {
display: grid;
grid-template-columns:
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr),
minmax(0,1fr);
}
O bien, puedes escribirlo con repeat():
.container {
display: grid;
grid-template-columns: repeat(12, minmax(0,1fr));
}
La función repeat() se puede usar para repetir cualquier sección de la ficha de la pista.
Por ejemplo, puedes repetir un patrón de pistas.
También puedes tener algunas pistas normales y una sección repetitiva.
.container {
display: grid;
grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}
auto-fill y auto-fit
Puedes combinar todo lo que aprendiste sobre el tamaño de la pista, minmax() y repetir, para crear un patrón útil con el diseño de cuadrícula.
Quizás no desees especificar la cantidad de seguimientos de columnas, sino que desees crear todas las que caben en tu contenedor.
Para lograrlo, usa repeat() y las palabras clave auto-fill o auto-fit.
En la siguiente demostración, la cuadrícula creará tantos seguimientos de 200 píxeles como quepan en el contenedor.
Abre la demostración en una ventana nueva y observa cómo cambia la cuadrícula a medida que modificas el tamaño del viewport.
En la demostración, obtenemos tantas pistas como sea posible.
Sin embargo, las pistas no son flexibles.
Aparecerá un espacio al final hasta que haya espacio suficiente para otra pista de 200 píxeles.
Si agregas la función minmax(), puedes solicitar todas las pistas que se adapten a un tamaño mínimo de 200 píxeles y un máximo de 1 fr.
Luego, la cuadrícula distribuye los recorridos de 200 píxeles y el espacio restante se distribuye de forma equitativa entre ellos.
Esto crea un diseño responsivo bidimensional sin necesidad de ninguna consulta de medios.
Existe una diferencia sutil entre auto-fill y auto-fit.
En la siguiente demostración, se usará un diseño de cuadrícula con la sintaxis explicada anteriormente, pero con solo dos elementos de cuadrícula en el contenedor de cuadrículas.
Si usas la palabra clave auto-fill, puedes ver que se crearon pistas vacías.
Si cambias la palabra clave a auto-fit, los segmentos se contraerán y se mostrarán en 0.
Esto significa que las ramas flexibles ahora aumentan para consumir el espacio.
En cambio, las palabras clave auto-fill y auto-fit actúan exactamente de la misma manera.
No hay diferencia entre ellos una vez que se completa la primera pista.
Colocación automática
Hasta ahora, ya viste la colocación automática de cuadrícula en las demostraciones. Los elementos se colocan en la cuadrícula, uno por celda, en el orden en que aparecen en la fuente. Para muchos diseños, esto podría ser todo lo que necesitas. Si necesitas más control, hay algunas acciones que puedes realizar. La primera es modificar el diseño de ubicación automática.
Colocar elementos en columnas
El comportamiento predeterminado del diseño de cuadrícula es colocar elementos a lo largo de las filas.
En su lugar, puedes hacer que los elementos se coloquen en columnas mediante grid-auto-flow: column.
Debes definir seguimientos de filas, de lo contrario, los elementos crearán seguimientos de columnas intrínsecas y los diseñarán en una sola fila larga.
Estos valores se relacionan con el modo de escritura del documento.
Una fila siempre se ejecuta en la misma dirección que una oración en el modo de escritura del documento o componente.
En la siguiente demostración, puedes cambiar el modo del valor de grid-auto-flow y la propiedad writing-mode.
Segmentos de seguimiento
Puedes hacer que algunos o todos los elementos de un diseño de ubicación automática abarquen más de una pista.
Usa la palabra clave span más la cantidad de líneas que se abarcarán como un valor para grid-column-end o grid-row-end.
.item {
grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}
Como no especificaste un grid-column-start, se usa el valor inicial de auto y se coloca de acuerdo con las reglas de posición automática.
También puedes especificar lo mismo con la abreviatura grid-column:
.item {
grid-column: auto / span 2;
}
Llena los vacíos
Un diseño de ubicación automática con algunos elementos que abarcan varios segmentos puede generar una cuadrícula con algunas celdas sin completar.
El comportamiento predeterminado del diseño de cuadrícula con un diseño colocado de forma automática es avanzar siempre.
Los elementos se colocarán según el orden en el que se encuentren en la fuente o cualquier modificación con la propiedad order.
Si no hay suficiente espacio para que quepa un elemento, la cuadrícula dejará un espacio y pasará a la siguiente pista.
En la siguiente demostración, se muestra este comportamiento.
La casilla de verificación aplicará el modo de empaquetado denso.
Para ello, se le asigna a grid-auto-flow un valor de dense.
Con este valor establecido, la cuadrícula tomará elementos más adelante en el diseño y los usará para llenar los espacios.
Esto puede significar que la pantalla se desconecta del orden lógico.
Colocación de elementos
Ya tienes muchas funcionalidades de la cuadrícula de CSS. Ahora, veamos cómo posicionamos los elementos en la cuadrícula que creamos.
Lo primero que hay que recordar es que el diseño de cuadrícula de CSS se basa en una cuadrícula de líneas numeradas. La manera más sencilla de colocar los elementos en la cuadrícula es colocarlos de una línea a otra. Descubrirás otras formas de colocar elementos en esta guía, pero siempre tendrás acceso a esas líneas numeradas.
Puedes usar las siguientes propiedades para ubicar elementos por número de línea:
Tienen abreviaturas que te permiten establecer las líneas de inicio y finalización al mismo tiempo:
Para colocar tu elemento, establece las líneas de inicio y finalización del área de cuadrícula en la que debe colocarse.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px 100px);
}
.item {
grid-column-start: 1; /* start at column line 1 */
grid-column-end: 4; /* end at column line 4 */
grid-row-start: 2; /*start at row line 2 */
grid-row-end: 4; /* end at row line 4 */
}
Las herramientas para desarrolladores de Chrome pueden brindarle una guía visual de las líneas que le permitirán verificar dónde se ubica su elemento.
La numeración de las líneas sigue el modo de escritura y la dirección del componente. En la siguiente demostración, cambia el modo de escritura o la dirección para ver cómo la posición de los elementos se mantiene coherente con la forma en que fluye el texto.
Apilar elementos
Con el posicionamiento basado en líneas, puedes colocar elementos en la misma celda de la cuadrícula.
Esto significa que puedes apilar elementos o hacer que un elemento se superponga parcialmente con otro.
Los elementos que aparezcan más adelante en la fuente se mostrarán sobre los elementos anteriores.
Puedes cambiar este orden de apilado con z-index al igual que con los elementos posicionados.
Números de línea negativos
Cuando creas una cuadrícula con grid-template-rows y grid-template-columns, creas lo que se conoce como cuadrícula explícita.
Se trata de una cuadrícula que has definido y dado tamaño a los recorridos.
En ocasiones, tendrás elementos que se mostrarán fuera de esta cuadrícula explícita.
Por ejemplo, puedes definir seguimientos de columnas y, luego, agregar varias filas de elementos de cuadrícula sin definir los seguimientos de filas.
El tamaño de las pistas se ajustará automáticamente de forma predeterminada.
También puedes colocar un elemento con grid-column-end que esté fuera de la cuadrícula explícita definida.
En ambos casos, la cuadrícula creará segmentos para que funcione el diseño, que se conocen como cuadrícula implícita.
La mayoría de las veces, no hará ninguna diferencia si trabajas con una cuadrícula implícita o explícita. Sin embargo, con las posiciones basadas en líneas, es posible que encuentres la principal diferencia entre ambas.
Con números de línea negativos, puedes colocar elementos desde la línea final de la cuadrícula explícita.
Esto puede ser útil si deseas que un elemento abarque desde la primera hasta la última línea de la columna.
En ese caso, puedes usar grid-column: 1 / -1.
El elemento se estirará a la derecha de la cuadrícula explícita.
Sin embargo, esto solo funciona para la cuadrícula explícita. Toma un diseño de tres filas de elementos ubicados de forma automática en las que desees que el primer elemento se extienda hasta la línea final de la cuadrícula.
Tal vez creas que puedes asignar grid-row: 1 / -1 a ese elemento.
En la siguiente demostración, verás que esto no funciona.
Los segmentos se crean en la cuadrícula implícita; no hay forma de llegar al final de la cuadrícula mediante -1.
Cómo ajustar el tamaño de las pistas implícitas
El tamaño de los segmentos creados en la cuadrícula implícita se ajustará automáticamente de forma predeterminada.
Sin embargo, si deseas controlar el tamaño de las filas, usa la propiedad grid-auto-rows y para las columnas grid-auto-columns.
Para crear todas las filas implícitas con un tamaño mínimo de 10em y uno máximo de auto, haz lo siguiente:
.container {
display: grid;
grid-auto-rows: minmax(10em, auto);
}
Para crear columnas implícitas con un patrón de 100 px y 200 px de ancho En este caso, la primera columna implícita será de 100 px, la segunda de 200 px, la tercera será de 100 px, y así sucesivamente.
.container {
display: grid;
grid-auto-columns: 100px 200px;
}
Líneas de cuadrícula con nombre
Puede facilitar la colocación de elementos en un diseño si las líneas tienen un nombre en lugar de un número. Puedes nombrar cualquier línea de la cuadrícula agregando el nombre que prefieras entre corchetes. Se pueden agregar varios nombres, separados por un espacio dentro de los mismos corchetes. Una vez que nombras las líneas, puedes usarlas en lugar de números.
.container {
display: grid;
grid-template-columns:
[main-start aside-start] 1fr
[aside-end content-start] 2fr
[content-end main-end]; /* a two column layout */
}
.sidebar {
grid-column: aside-start / aside-end;
/* placed between line 1 and 2*/
}
footer {
grid-column: main-start / main-end;
/* right across the layout from line 1 to line 3*/
}
Áreas de plantilla de cuadrícula
También puedes nombrar áreas de la cuadrícula y colocar elementos en esas áreas con nombre. Esta es una técnica encantadora, ya que te permite ver cómo se ve tu componente directamente en CSS.
Para comenzar, asigna un nombre a los elementos secundarios directos del contenedor de cuadrícula con la propiedad grid-area:
header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
footer {
grid-area: footer;
}
Puedes elegir el nombre que desees, excepto las palabras clave auto y span.
Una vez que tengan un nombre para todos los elementos, usa la propiedad grid-template-areas para definir qué celdas de la cuadrícula abarcará cada uno.
Cada fila se define entre comillas.
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"header header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
Hay algunas reglas cuando se usa grid-template-areas.
- El valor debe ser una cuadrícula completa sin celdas vacías.
- Para abarcar las pistas, repite el nombre.
- Las áreas creadas al repetir el nombre deben ser rectangulares y no se pueden desconectar.
Si infringes cualquiera de las reglas anteriores, el valor se considera no válido y se elimina.
Para dejar espacio en blanco en la cuadrícula, usa . o múltiplos sin espacios en blanco entre ellos.
Por ejemplo, para dejar la primera celda vacía de la cuadrícula, puedo agregar una serie de caracteres .:
.container {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas:
"....... header header header"
"sidebar content content content"
"sidebar footer footer footer";
}
Como todo tu diseño se define en un solo lugar, resulta sencillo redefinirlo mediante consultas de medios.
En el siguiente ejemplo, creé un diseño de dos columnas que se mueve a tres columnas mediante la redefinición del valor de grid-template-columns y grid-template-areas.
Abre el ejemplo en una ventana nueva para experimentar con el tamaño del viewport y ver el cambio de diseño.
También puedes ver cómo se relaciona la propiedad grid-template-areas con writing-mode y la dirección, al igual que con otros métodos de cuadrícula.
Propiedades abreviadas
Existen dos propiedades abreviadas que te permiten establecer muchas de las propiedades de la cuadrícula a la vez. Estas pueden parecer un poco confusas hasta que analices exactamente cómo se combinan. Tú decides si quieres usarlas o si prefieres usar atajos.
grid-template
La propiedad grid-template es una abreviatura de grid-template-rows, grid-template-columns y grid-template-areas.
Las filas se definen primero, junto con el valor de grid-template-areas.
Se agrega el tamaño de columna después de /.
.container {
display: grid;
grid-template:
"head head head" minmax(150px, auto)
"sidebar content content" auto
"sidebar footer footer" auto / 1fr 1fr 1fr;
}
grid propiedad
La abreviatura grid se puede usar exactamente de la misma manera que la abreviatura grid-template.
Cuando se use de esta manera, restablecerá las demás propiedades de cuadrícula que acepta a sus valores iniciales.
Este es el conjunto completo:
grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow
De forma alternativa, puedes usar esta abreviatura para definir cómo se comporta la cuadrícula implícita, por ejemplo:
.container {
display: grid;
grid: repeat(2, 80px) / auto-flow 120px;
}
Alineación
El diseño de cuadrícula usa las mismas propiedades de alineación que aprendiste en la guía de flexbox.
En la cuadrícula, las propiedades que comienzan con justify- siempre se usan en el eje intercalado, la dirección en la que se ejecutan las oraciones en el modo de escritura.
Las propiedades que comienzan con align- se usan en el eje de bloque, la dirección en la que se disponen los bloques en el modo de escritura.
justify-contentyalign-content: Distribuyen espacio adicional en el contenedor de cuadrícula alrededor de los segmentos o entre ellos.justify-selfyalign-self: Se aplican a un elemento de la cuadrícula para moverlo dentro del área de la cuadrícula en la que se coloca.justify-itemsyalign-items: se aplican al contenedor de cuadrícula para establecer todas las propiedadesjustify-selfen los elementos.
Distribución del espacio adicional
En esta demostración, la cuadrícula es más grande que el espacio necesario para diseñar las pistas de ancho fijo.
Esto significa que tenemos espacio tanto en las dimensiones intercaladas como en las de bloques de la cuadrícula.
Prueba con diferentes valores de align-content y justify-content para ver cómo se comportan los segmentos.
Observa cómo se aumentan las brechas cuando se usan valores como space-between, y cualquier elemento de la cuadrícula que abarque dos segmentos también crece para absorber el espacio adicional agregado a la brecha.
Cómo mover el contenido
Los elementos con un color de fondo parecen llenar el área de cuadrícula en su totalidad porque el valor inicial para justify-self y align-self es stretch.
En la demostración, cambia los valores de justify-items y align-items para ver cómo esto cambia el diseño.
El área de la cuadrícula no cambia de tamaño, sino que los elementos se mueven dentro del área definida.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre cuadrícula
¿Cuáles de los siguientes son términos de la cuadrícula de CSS?
main {
display: grid;
}
¿Cuál es la dirección de diseño predeterminada de una cuadrícula?
grid-auto-flow: column estuviera presente, una cuadrícula se diseñaría como columnas.¿Cuál es la diferencia entre auto-fit y auto-fill?
auto-fit estirará las celdas para que se ajusten al contenedor, mientras que auto-fill no.auto-fill coloca tantos elementos en la plantilla como sea posible, sin estirar. Fit los hace adecuados.auto-fit estirará un contenedor para que se ajuste a los elementos secundarios, mientras que auto-fill hará que los elementos secundarios quepan en el contenedor.¿Qué es min-content?
min-content es un valor relativo a las imágenes y palabras del cuadro.min-content no se refiere a eso con letras.min-content.¿Qué es max-content?
max-content no se refiere a eso con letras.min-content.¿Qué es la ubicación automática?
grid-area y se colocan en esa celdaRecursos
En esta guía, se proporciona una descripción general de las diferentes partes de la especificación del diseño de cuadrícula. Para obtener más información, consulta los siguientes recursos.