Grid

The CSS Podcast - 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.

Un encabezado con logotipo y navegación con una barra lateral y un área de contenido que muestra un artículo

A lo largo de los años, han existido 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 la 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 de dos dimensiones. Es decir, organizar los elementos en filas y columnas al mismo tiempo.

Cuando creas un diseño de cuadrícula, defines una cuadrícula con filas y columnas. Luego, colocas elementos en esa cuadrícula o permites que el navegador los coloque automáticamente en las celdas que creaste. Hay mucho que hacer con las cuadrículas, pero con una descripción general de lo que está disponible, crearás diseños de cuadrícula en poco tiempo.

Descripción general

Entonces, ¿qué puedes hacer con la cuadrícula? Los diseños de cuadrícula tienen las siguientes características. En esta guía, aprenderás sobre todas ellas.

  1. Una cuadrícula se puede definir con filas y columnas. Puedes elegir cómo ajustar el tamaño de estas pistas de filas y columnas, o bien pueden reaccionar al tamaño del contenido.
  2. Los elementos secundarios directos del contenedor de cuadrícula se colocarán automáticamente en esta cuadrícula.
  3. También puedes colocar los elementos en la ubicación precisa que desees.
  4. Las líneas y áreas de la cuadrícula se pueden nombrar para facilitar la colocación.
  5. El espacio libre en el contenedor de cuadrícula se puede distribuir entre los segmentos.
  6. Los elementos de la cuadrícula se pueden alinear dentro de su área.

Terminología de la cuadrícula

La cuadrícula incluye una gran cantidad de terminología nueva, ya que es la primera vez que CSS tiene un sistema de diseño real.

Líneas de cuadrícula

Una cuadrícula está formada por líneas que se extienden horizontal y verticalmente. Si tu cuadrícula tiene cuatro columnas, tendrá cinco líneas de columnas, incluida la que está después de la última columna.

Las líneas se numeran a partir de 1, y la numeración sigue el modo de escritura y la dirección de la secuencia de comandos del componente. Esto significa que la línea 1 de la columna 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.

Representación de diagrama de líneas de cuadrícula

Pistas de cuadrícula

Un segmento es el espacio entre dos líneas de la cuadrícula. Un segmento de fila se encuentra entre dos líneas de fila y un segmento de columna se encuentra entre dos líneas de columna. Cuando creamos nuestra cuadrícula, asignamos un tamaño a estos segmentos.

Representación de diagrama de un segmento de cuadrícula

Celda de cuadrícula

Una celda de cuadrícula es el espacio más pequeño de una cuadrícula definido por la intersección de los segmentos de fila y columna. Es como una celda de una tabla o una hoja de cálculo. Si defines una cuadrícula y no colocas ninguno de los elementos, estos se distribuirán automáticamente en cada celda de la cuadrícula definida.

Representación de diagrama de una celda de cuadrícula

Área de la cuadrícula

Varias celdas de cuadrícula juntas Para crear áreas de cuadrícula, se hace que un elemento abarque varios segmentos.

Representación de un diagrama de un área de cuadrícula

Brechas

Un canalón o un callejón entre las vías. A los efectos del tamaño, funcionan como un segmento normal. No puedes colocar contenido en un espacio, pero puedes extender los elementos de la cuadrícula a través de él.

Representación de diagrama de una cuadrícula con espacios

Contenedor de cuadrícula

El elemento HTML al que se le 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 cuadrícula

Un elemento de cuadrícula es un elemento que es un elemento secundario directo del contenedor de 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 segmentos de columna, dos segmentos de fila y una separación 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;
}

Esta cuadrícula muestra muchas de las cosas que se describen en la sección de terminología. Tiene tres segmentos de columnas. Cada pista usa una unidad de longitud diferente. Tiene dos segmentos de fila, uno que usa una unidad de longitud y el otro automático. Cuando se usa como ajuste automático del tamaño de la pista, se puede considerar que es tan grande como el contenido. Los segmentos se ajustan automáticamente de forma predeterminada.

Si el elemento con una clase de .container tiene elementos secundarios, estos se organizarán de inmediato en esta cuadrícula. Puedes ver esto en acción en la siguiente demostración.

La superposición de cuadrícula en las Herramientas para desarrolladores de Chrome puede ayudarte a comprender las diferentes 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. En 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.

Como se describe en la leyenda y las instrucciones
Una cuadrícula destacada en las Herramientas para desarrolladores de Chrome que muestra números de línea, celdas y segmentos.

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 de tamaño intrínseco. Estas palabras clave se definen en la especificación de tamaño de cuadro y agregan métodos adicionales para establecer el tamaño de los cuadros en CSS, no solo en los segmentos de cuadrícula.

  • min-content
  • max-content
  • fit-content()

La palabra clave min-content hará que una pista sea lo más pequeña posible sin que el contenido de la pista se desborde. Si cambias el diseño de cuadrícula de ejemplo para tener tres segmentos de columna, todos del tamaño de min-content, significa que se volverán tan estrechos como la palabra más larga del segmento.

La palabra clave max-content tiene el efecto contrario. El segmento se hará lo suficientemente ancho para que todo el contenido se muestre en una sola cadena larga sin interrupciones. Esto podría causar desbordamientos, ya que la cadena no se unirá.

Al principio, la función fit-content() actúa como max-content. Sin embargo, una vez que la pista alcanza el tamaño que pasas a la función, el contenido comienza a unirse. Por lo tanto, fit-content(10em) creará un segmento de menos de 10 em, si el tamaño de max-content es inferior a 10 em, pero nunca mayor a 10 em.

En la siguiente demostración, prueba las diferentes palabras clave de tamaño intrínseco cambiando el tamaño de los segmentos de cuadrícula.

La unidad fr

Tenemos dimensiones de longitud, porcentajes y también 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 hayan distribuido los elementos. Por lo tanto, para tener tres columnas que obtengan la misma parte del espacio disponible, haz lo siguiente:

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

Como la unidad fr comparte el espacio disponible, se puede combinar con una separación de tamaño fijo o pistas de tamaño fijo. Para tener un componente con un elemento de tamaño fijo y que la segunda pista ocupe el espacio restante, puedes usar una lista de pistas de grid-template-columns: 200px 1fr.

Si usas valores diferentes para la unidad fr, se compartirá el espacio en proporción. Los valores más grandes ocupan más espacio libre. En la siguiente demostración, cambia el valor del tercer segmento.

La función minmax()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

Esta función significa que puedes establecer un tamaño mínimo y máximo para un segmento. Esto puede ser muy ú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, luego, 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 que una pista ocupe una parte igual del espacio en el contenedor de cuadrícula menos los espacios, usa minmax. Reemplaza 1fr como tamaño de pista por minmax(0, 1fr). Esto hace que el tamaño mínimo de la pista sea 0 y no el tamaño de contenido mínimo. Luego, la cuadrícula tomará todo el tamaño disponible en el contenedor, deducirá el tamaño necesario para cualquier espacio y compartirá el resto según tus unidades de fr.

Notación repeat()

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

Si quieres crear una cuadrícula de pistas 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);
}

También 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 lista de pistas. Por ejemplo, puedes repetir un patrón de pistas. También puedes tener algunas pistas normales y una sección que se repite.

.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 los segmentos, minmax(), y repetirlo para crear un patrón útil con el diseño de cuadrícula. Quizás no quieras especificar la cantidad de segmentos de columna, sino crear tantos como quepan en tu contenedor.

Puedes lograrlo con repeat() y las palabras clave auto-fill o auto-fit. En la siguiente demostración, la cuadrícula creará tantas pistas 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 cambias el tamaño del viewport.

En la demostración, obtenemos tantas pistas como quepan. Sin embargo, los segmentos no son flexibles. Verás un espacio al final hasta que haya espacio suficiente para otra pista de 200 píxeles. Si agregas la función minmax(), puedes solicitar tantas pistas como se ajusten con un tamaño mínimo de 200 píxeles y un máximo de 1fr. Luego, la cuadrícula establece las pistas de 200 píxeles y el espacio restante se distribuye de manera equitativa entre ellas.

Esto crea un diseño responsivo bidimensional sin necesidad de consultas de contenido multimedia.

Hay una diferencia sutil entre auto-fill y auto-fit. En la siguiente demostración, juega con un diseño de cuadrícula con la sintaxis explicada anteriormente, pero con solo dos elementos de cuadrícula en el contenedor de cuadrícula. Con la palabra clave auto-fill, puedes ver que se crearon segmentos vacíos. Cambia la palabra clave a auto-fit y las pistas se reducirán a 0 de tamaño. Esto significa que los segmentos flexibles ahora crecen para consumir el espacio.

De lo contrario, las palabras clave auto-fill y auto-fit actúan de la misma manera. No hay diferencia entre ellos una vez que se completa el primer segmento.

Posición automática

Ya viste la colocación automática de cuadrículas en acción en las demostraciones hasta ahora. 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 puede ser todo lo que necesitas. Si necesitas más control, hay algunas medidas que puedes tomar. La primera es modificar el diseño de la ubicación automática.

Colocación de elementos en columnas

El comportamiento predeterminado del diseño de cuadrícula es colocar los elementos a lo largo de las filas. En su lugar, puedes hacer que los elementos se coloquen en columnas con grid-auto-flow: column. Debes definir los segmentos de fila; de lo contrario, los elementos crearán segmentos de columna intrínsecos y se organizarán en una fila larga.

Estos valores se relacionan con el modo de escritura del documento. Una fila siempre se ejecuta en la dirección en la que se ejecuta 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.

Pistas continuas

Puedes hacer que algunos o todos los elementos de un diseño ubicado automáticamente abarquen más de un segmento. Usa la palabra clave span más la cantidad de líneas que se extenderá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 según las reglas de colocación automática. También puedes especificar lo mismo con el atajo grid-column:

.item {
    grid-column: auto / span 2;
}

Cómo llenar vacíos

Un diseño ubicado automáticamente con algunos elementos que abarcan varias pistas puede generar una cuadrícula con algunas celdas sin completar. El comportamiento predeterminado del diseño de cuadrícula con un diseño completamente automático es siempre avanzar. Los elementos se colocarán según el orden en que se encuentran en la fuente o cualquier modificación con la propiedad order. Si no hay suficiente espacio para un elemento, la cuadrícula dejará un espacio en blanco y se moverá al siguiente segmento.

En la siguiente demostración, se muestra este comportamiento. La casilla de verificación aplicará el modo de empaquetado denso. Para habilitar esta opción, asigna un valor de dense a grid-auto-flow. 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 funciones de CSS Grid. Ahora, veamos cómo posicionar los elementos en la cuadrícula que creamos.

Lo primero que debes recordar es que el diseño de cuadrícula de CSS se basa en una cuadrícula de líneas numeradas. La forma más sencilla de colocar elementos en la cuadrícula es colocarlos de una línea a otra. En esta guía, descubrirás otras formas de colocar elementos, pero siempre tendrás acceso a esas líneas numeradas.

Las propiedades que puedes usar para colocar elementos por número de línea son las siguientes:

Tienen abreviaturas que te permiten establecer las líneas de inicio y finalización a la vez:

Para colocar el elemento, establece las líneas de inicio y finalización del área de la cuadrícula en la que se debe colocar.

.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 brindarte una guía visual de las líneas para verificar dónde se encuentra tu elemento.

El número de línea 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 ubicación de los elementos se mantiene coherente con la forma en que fluye el texto.

Apilado de 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 uno se superponga parcialmente con otro. Los elementos que aparecen más adelante en la fuente se mostrarán sobre los que aparecen antes. Puedes cambiar este orden de apilamiento 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. Esta es una cuadrícula que definiste y a la que le asignaste un tamaño a los segmentos.

A veces, tendrás elementos que se mostrarán fuera de esta cuadrícula explícita. Por ejemplo, puedes definir segmentos de columna y, luego, agregar varias filas de elementos de cuadrícula sin definir segmentos de fila. Los segmentos se ajustarán 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 el diseño funcione, y estos segmentos se denominan 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 la ubicación basada en líneas, es posible que te encuentres con la diferencia principal entre ambas.

Con los 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 extenderá a lo largo 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 colocados automáticamente en el que deseas que el primer elemento abarque hasta la línea final de la cuadrícula.

Una barra lateral con 8 elementos de cuadrícula hermanos

Podrías pensar que puedes asignarle grid-row: 1 / -1 a ese elemento. En la siguiente demostración, puedes ver que esto no funciona. Las pistas se crean en la cuadrícula implícita, y no hay forma de llegar al final de la cuadrícula con -1.

Cómo determinar el tamaño de los segmentos implícitos

Los segmentos creados en la cuadrícula implícita se ajustarán 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 un tamaño 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 pistas 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 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. Para nombrar cualquier línea de la cuadrícula, agrega el nombre que elijas entre corchetes. Se pueden agregar varios nombres, separados por un espacio dentro de los mismos corchetes. Una vez que hayas nombrado las líneas, podrás usarlas en lugar de los 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 la plantilla de cuadrícula

También puedes nombrar áreas de la cuadrícula y colocar elementos en esas áreas. Esta es una técnica excelente, ya que te permite ver cómo se ve tu componente en el CSS.

Para comenzar, asigna un nombre a los elementos secundarios directos de tu 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;
}

El nombre puede ser cualquier cosa que quieras, excepto las palabras clave auto y span. Una vez que hayas nombrado todos los elementos, usa la propiedad grid-template-areas para definir a qué celdas de la cuadrícula abarcará cada elemento. 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";
}

Existen algunas reglas para usar grid-template-areas.

  • El valor debe ser una cuadrícula completa sin celdas vacías.
  • Para abarcar varios segmentos, repite el nombre.
  • Las áreas creadas con la repetición del nombre deben ser rectangulares y no se pueden desconectar.

Si incumples alguna de las reglas anteriores, el valor se considerará no válido y se descartará.

Para dejar espacios en blanco en la cuadrícula, usa un . o varios sin espacios en blanco entre ellos. Por ejemplo, para dejar la primera celda de la cuadrícula vacía, podría 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 el diseño se define en un solo lugar, es sencillo redefinirlo con consultas de medios. En el siguiente ejemplo, creé un diseño de dos columnas que se mueve a tres columnas redefiniendo el valor de grid-template-columns y grid-template-areas. Abre el ejemplo en una ventana nueva para jugar con el tamaño del viewport y ver cómo cambia el diseño.

También puedes ver cómo la propiedad grid-template-areas se relaciona con writing-mode y la dirección, como con otros métodos de cuadrícula.

Propiedades de combinación de teclas

Existen dos propiedades de abreviatura que te permiten establecer muchas de las propiedades de la cuadrícula de una sola vez. Estas pueden parecer un poco confusas hasta que desglosas exactamente cómo se combinan. Tú decides si quieres usarlos o prefieres usar las formas largas.

grid-template

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

La propiedad grid-template es una abreviatura de grid-template-rows, grid-template-columns y grid-template-areas. Primero se definen las filas, junto con el valor de grid-template-areas. El tamaño de la columna se agrega después de un /.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid propiedad

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

La abreviatura grid se puede usar de la misma manera que la abreviatura grid-template. Cuando se usa de esta manera, restablece las otras propiedades de la cuadrícula que acepta a sus valores iniciales. El conjunto completo es el siguiente:

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Como 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 sobre 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 bloques, que es la dirección en la que se organizan los bloques en el modo de escritura.

  • justify-content y align-content: Distribuyen espacio adicional en el contenedor de cuadrícula alrededor de las pistas o entre ellas.
  • justify-self y align-self: Se aplican a un elemento de cuadrícula para moverlo dentro del área de cuadrícula en la que se encuentra.
  • justify-items y align-items: Se aplican al contenedor de cuadrícula para establecer todas las propiedades justify-self en los elementos.

Cómo distribuir el espacio adicional

En esta demostración, la cuadrícula es más grande que el espacio necesario para diseñar los segmentos de ancho fijo. Esto significa que tenemos espacio en las dimensiones intercaladas y de bloque de la cuadrícula. Prueba diferentes valores de align-content y justify-content para ver cómo se comportan los segmentos.

Observa cómo los espacios se hacen más grandes cuando se usan valores como space-between, y cualquier elemento de la cuadrícula que abarca dos segmentos también crece para absorber el espacio adicional que se agrega al espacio.

Cómo mover contenido

Los elementos con un color de fondo parecen ocupar por completo el área de la cuadrícula en la que se colocan, porque el valor inicial de justify-self y align-self es stretch.

En la demostración, cambia los valores de justify-items y align-items para ver cómo 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 tu comprensión

Pon a prueba tus conocimientos sobre cuadrículas

¿Cuáles de las siguientes opciones son términos de cuadrícula de CSS?

líneas
La cuadrícula está dividida por estos separadores horizontales y verticales.
Círculos
Lo siento, no hay conceptos de círculos en la cuadrícula de CSS.
células
Una sola intersección de una fila y una columna crea una celda de cuadrícula.
áreas
Varias celdas juntas
trenes
Lo siento, no hay conceptos de trenes en la cuadrícula de CSS.
brechas
Es el espacio entre las celdas.
recorridos
Una sola fila o columna es un segmento en la cuadrícula.
 
main {
  display: grid;
}

¿Cuál es la dirección de diseño predeterminada de una cuadrícula?

Filas
Sin columnas definidas, los elementos secundarios de la cuadrícula se organizan en la dirección del bloque como lo harían normalmente.
Columnas
Si 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 lo hará.
auto-fill coloca tantos elementos como sea posible en la plantilla, sin estirarla. Fit hace que se ajusten.
auto-fit estirará un contenedor para que se ajuste a los elementos secundarios, mientras que auto-fill hará que los elementos secundarios se ajusten al contenedor.
No es así como se comportan estas propiedades.

¿Qué es min-content?

Igual que 0%
El 0% es un valor relativo del cuadro superior, mientras que min-content es relativo a las palabras y las imágenes del cuadro.
La letra más pequeña
Si bien hay una letra más pequeña, min-content no se refiere a las letras.
La palabra o imagen más larga.
En la frase “CSS es genial”, la palabra genial sería el min-content.

¿Qué es max-content?

La oración más larga o la imagen más grande.
Es el tamaño máximo que solicita o especifica el contenido del cuadro. Es una oración o una imagen en su ancho máximo.
La letra más larga.
Si bien hay una letra más larga, max-content no se refiere a las letras.
La palabra más larga.
La palabra más larga es min-content.

¿Qué es la posición automática?

Cuando la cuadrícula toma los elementos secundarios y los coloca en el mejor orden según las heurísticas del navegador.
Ningún navegador cambiará el orden de tu contenido, solo tus propios estilos lo harán.
Cuando los elementos secundarios de la cuadrícula tienen un grid-area y se colocan en esa celda.
Esa es una posición explícita, no automática.
Cuando los elementos de cuadrícula no asignados se colocan uno al lado del otro en una plantilla de diseño.
Los elementos de la cuadrícula sin un área explícita se colocarán en la siguiente celda de cuadrícula disponible.

Recursos

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.