html - template - ¿Por qué el diseño de CSS Grid agrega espacios adicionales entre las celdas?
grid-template-rows (4)
Los espacios verticales son causados por las imágenes que no llenan el espacio vertical en los elementos de la cuadrícula.
El problema se agrava con
align-items: center
en el contenedor, que elimina los elementos de
align-items: stretch
defecto.
Esencialmente, no hay espacios entre los elementos de la cuadrícula.
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 muchos espacios en blanco.
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 cuadrícula
cuando
grid-row-gap
y
grid-column-gap
son 0
:
Las líneas rojas representan los elementos de la cuadrícula. Las imágenes son el contenido de los elementos de la cuadrícula. Las líneas punteadas representan las líneas de la cuadrícula.
(2) No hay problema
cuando
grid-column-gap
es 10px
:
(3) Pero mira lo que sucede
cuando
grid-row-gap
es 10px
:
Los elementos de la cuadrícula (líneas rojas) envuelven perfectamente su contenido (las imágenes).
Esto sucede solo porque el contenedor está configurado para
align-items: center
.
(4) Ahora eliminemos
align-items: center
(que restaura el valor de
stretch
predeterminado) y mantenga
grid-column-gap: 10px
y
grid-row-gap: 10px
:
Como puede ver, los elementos de la cuadrícula (con bordes rojos y fondos amarillos) ahora se expanden a toda su altura. Pero las imágenes, al ser más pequeñas que los elementos, dejan huecos.
(5) Aquí está la cuadrícula de (4) arriba sin los indicadores.
align-items: stretch
align-items: center
(mismo diseño que en la pregunta)
(6) Entonces, la clave es conseguir que las imágenes llenen los elementos de la cuadrícula.
Una solución simple es aplicar
display: flex
a los elementos de la cuadrícula, que asignará automáticamente
align-items: stretch
a las imágenes, haciendo que tomen altura completa.
Y luego, dependiendo de cómo desee 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 presenta así:
.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; }
<div class="grid">
<figure class="gi13x12">
<img itemprop="image" src="http://placehold.it/130x123">
</figure>
<figure class="gi11x6 one">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi11x6 two">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi4x4 one">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 two">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 three">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi20x12">
<img itemprop="image" src="http://placehold.it/200x120">
</figure>
</div>
Función de superposición de cuadrícula genial en Firefox
En las herramientas de desarrollo de Firefox, cuando inspeccionas el contenedor de la cuadrícula, hay un pequeño icono de cuadrícula en la declaración de CSS. Al hacer clic, muestra un esquema de su cuadrícula en la página.
Más detalles aquí: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
No puedo entender 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 están reducidos a cero:
.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;
}
<div class="grid">
<figure class="gi13x12">
<img itemprop="image" src="http://placehold.it/130x123">
</figure>
<figure class="gi11x6 one">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi11x6 two">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi4x4 one">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 two">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 three">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi20x12">
<img itemprop="image" src="http://placehold.it/200x120">
</figure>
</div>
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 here .
para eliminar la brecha después de colocar la celda "grid-gap: 0px;" a .grid clase css
Tenga en cuenta que esta respuesta se publicó antes de la última actualización y, como tal, responda el ejemplo de código inicial (el que está dentro de la pregunta) de manera diferente. La versión editada de la pregunta es respondida brillantemente por Michael.
Primero, el espacio interno no tiene nada que ver con CSS Grid, margen o relleno, proviene del hecho de que un
img
es un elemento en línea, que al igual que los caracteres tiene un espacio en blanco, para los descendientes, 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 está causado por las
grid-auto-rows
, así que elimínelo 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 pila
.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;
}
<div class="grid">
<figure class="gi13x12">
<img itemprop="image" src="http://placehold.it/130x123">
</figure>
<figure class="gi11x6 one">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi11x6 two">
<img itemprop="image" src="http://placehold.it/110x60">
</figure>
<figure class="gi4x4 one">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 two">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi4x4 three">
<img itemprop="image" src="http://placehold.it/40x39">
</figure>
<figure class="gi20x12">
<img itemprop="image" src="http://placehold.it/200x120">
</figure>
</div>
Con respecto a su muestra de Fiddle (y el volcado de pantalla agregado), donde ni coincide con la muestra de código interno, y después de los ajustes anteriores, todavía hay un pequeño espacio interno, que se debe al hecho de que la suma de la altura de los elementos más pequeños no coincide la más alta, ni sus imágenes, ya que la imagen más alta es 123px, pero las imágenes más pequeñas son 120px (2 * 60) y 117px (3 * 39).