¿Por qué el diseño de cuadrícula CSS agrega espacios adicionales entre las celdas?

No se puede averiguar por qué el diseño de la cuadrícula CSS agrega un espacio adicional no deseado al contenido alrededor de las celdas verticales, aunque el margen y el relleno se han reducido a cero:

imágenes posicionadas con cuadrícula CSS

.grid { display: grid; grid-template-columns: 13fr 11fr 4fr 20fr; grid-auto-rows: 12fr; grid-gap: 4px; align-items: center; } .grid figure { outline: 1px solid red; margin: 0; padding: 0; } .grid figure img { margin: 0; padding: 0; width: 100%; display: block; } .grid .gi13x12 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 13; } .grid .gi11x6.one { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 7; } .grid .gi11x6.two { grid-column-start: 2; grid-column-end: 3; grid-row-start: 7; grid-row-end: 13; } .grid .gi4x4.one { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5; } .grid .gi4x4.two { grid-column-start: 3; grid-column-end: 4; grid-row-start: 5; grid-row-end: 9; } .grid .gi4x4.three { grid-column-start: 3; grid-column-end: 4; grid-row-start: 9; grid-row-end: 13; } .grid .gi20x12 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 13; } 
 

https://jsfiddle.net/adanchenkov/dy77hk9k/

Los espacios verticales son causados ​​por las imágenes que no llenan el espacio vertical en los elementos de la grilla.

El problema empeora con align-items: center en el contenedor, lo que elimina los elementos de align-items: stretch defecto.

Básicamente, no hay espacios entre los elementos de la grilla. Forman una cuadrícula limpia y ordenada. Pero debido a que las imágenes son más pequeñas que los elementos que las contienen, y los elementos se centran verticalmente con elementos de align-items , hay muchas lagunas.

Aquí hay una explicación más detallada, usando la herramienta de superposición de cuadrícula de Firefox para ilustración:

(1) Esta es su grilla cuando grid-row-gap y grid-column-gap son 0 :

enter image description here

Las líneas rojas representan los elementos de la grilla. Las imágenes son el contenido de los elementos de la grilla. Las líneas de puntos representan las líneas de la cuadrícula.


(2) No hay problema cuando grid-column-gap es 10px :

enter image description here


(3) Pero mira lo que sucede cuando grid-row-gap es 10px :

enter image description here

Los elementos de la cuadrícula (líneas rojas) envuelven cuidadosamente su contenido (las imágenes). Esto ocurre solo porque el contenedor está configurado para align-items: center .


(4) Ahora align-items: center (que restaura el valor de stretch predeterminado) y mantengamos grid-column-gap: 10px y grid-row-gap: 10px :

enter image description here

Como puede ver, los elementos de la cuadrícula (que tienen bordes rojos y fondos amarillos) ahora se expanden a una altura completa. Pero las imágenes, al ser más pequeñas que los elementos, dejan huecos.


(5) Aquí está la cuadrícula de (4) anterior sin los indicadores.

align-items: stretch

enter image description here

align-items: center (el mismo diseño que en la pregunta)

enter image description here


(6) Entonces, la clave es conseguir que las imágenes llenen los elementos de la grilla.

Una solución simple es aplicar display: flex a los elementos de la cuadrícula, lo que automáticamente asignará elementos de align-items: stretch a las imágenes, lo que hace que tomen la altura completa.

Y luego, dependiendo de cómo quiera que se vean las imágenes, puede usar object-fit para administrar su apariencia.

Agregue esto a su código:

 .grid figure { display: flex; } .grid figure img { object-fit: cover; /* also try `contain` and `fill` */ } 

Con los ajustes anteriores, la cuadrícula se muestra así:

enter image description here

violín revisado

 .grid { display: grid; grid-template-columns: 13fr 11fr 4fr 20fr; grid-auto-rows: repeat(12, 1fr); grid-gap: 10px; /* align-items: center; */ } .grid figure { border: 2px solid red; margin: 0; padding: 0; background-color: yellow; display: flex; /* new */ } .grid figure img { margin: 0; padding: 0; width: 100%; display: block; object-fit: cover; /* new */ } .grid .gi13x12 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 13; } .grid .gi11x6.one { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 7; } .grid .gi11x6.two { grid-column-start: 2; grid-column-end: 3; grid-row-start: 7; grid-row-end: 13; } .grid .gi4x4.one { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5; } .grid .gi4x4.two { grid-column-start: 3; grid-column-end: 4; grid-row-start: 5; grid-row-end: 9; } .grid .gi4x4.three { grid-column-start: 3; grid-column-end: 4; grid-row-start: 9; grid-row-end: 13; } .grid .gi20x12 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 13; } * { box-sizing: border-box; } 
 

Tenga en cuenta que esta respuesta se publicó antes de la última actualización y, como tal, responde de forma diferente a la muestra del código inicial (la que está dentro de la pregunta). La versión editada de la pregunta es respondida shinymente por Michael.

En primer lugar, el espacio interior no tiene nada que ver con CSS Grid, margin o padding, sino que se debe al hecho de que un img es un elemento en línea, que al igual que los caracteres tiene un espacio en blanco, para los descensores, debajo de la línea de base.

Una solución para eso es agregar display: block a la regla .grid figure img .

 .grid figure img { display: block; width: 100%; } 

En segundo lugar, el espacio exterior es causado por las grid-auto-rows , por lo que debe eliminarlo de la regla .grid .

 .grid { display: grid; grid-template-columns: 13fr 11fr 4fr 20fr; /*grid-auto-rows: 12fr; remove this */ grid-gap: 3px; align-items: flex-start; } 

Fragmento de stack

 .grid { display: grid; grid-template-columns: 13fr 11fr 4fr 20fr; /*grid-auto-rows: 12fr; removed */ grid-gap: 3px; align-items: flex-start; } .grid figure { outline: 1px solid red; margin: 0; padding: 0; } .grid figure img { width: 100%; display: block; } .grid .gi13x12 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 13; } .grid .gi11x6.one { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 7; } .grid .gi11x6.two { grid-column-start: 2; grid-column-end: 3; grid-row-start: 7; grid-row-end: 13; } .grid .gi4x4.one { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5; } .grid .gi4x4.two { grid-column-start: 3; grid-column-end: 4; grid-row-start: 5; grid-row-end: 9; } .grid .gi4x4.three { grid-column-start: 3; grid-column-end: 4; grid-row-start: 9; grid-row-end: 13; } .grid .gi20x12 { grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 13; } 
 

Puede eliminar el espacio dentro de la figura haciendo que la imagen flote.

 .grid figure img { margin: 0; padding: 0; width: 100%; float: left; } 

Encuentre el código de actualización aquí .

para eliminar Gap después de la celda “grid-gap: 0px;” a la clase .grid css