CSS: Tener un elemento de rejilla para abarcar todas las columnas restantes en la fila [duplicar]

Aquí hay un código pequeño que he hecho

https://codepen.io/Scipionh/pen/yLabxWx

Mis requisitos son los siguientes:

  • cada artículo tiene que tener el mismo ancho (aparte del otro bloque)
  • el ancho del contenedor se define y necesito tener elementos que toquen su frontera
  • Tengo un número desconocido de elementos (aquí 8 antes del otro bloque pero puede ser más o menos)
  • el Otro bloque debe abarcar todas las columnas restantes en la fila que está en

En mi ejemplo, me gustaría tener el otro ajuste de bloque en la segunda fila.

Básicamente el culpable aquí es

grid-column: 2/-1;

como 2 es un valor codificado.

I Saber este es un trabajo de flexbox como queremos consumir el espacio restante (y ya lo hemos hecho con él) !

¿Pero alguna idea de cómo arreglar mi solución de rejilla?

Salud.

Pregunta hecha hace 3 años, 4 meses, 13 días - Por phpphoenix

2 Respuestas:

  • Para hacer que un elemento de rejilla abarque todas las columnas restantes en una fila, puedes usar la propiedad grid-column con el valor span para indicar cuántas columnas debe abarcar el elemento.

    En el caso de querer que un elemento abarque todas las columnas restantes en una fila, puedes hacer lo siguiente en tu código CSS:

    css
.otro-bloque {
    grid-column: span 2 / -1; / El elemento abarcará desde la columna 2 hasta el final /
}

    De esta forma, el elemento con la clase otro-bloque ocupará todas las columnas restantes en la fila dentro del contenedor de rejilla.

    Espero que esta solución te haya sido de ayuda. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 18, 2020 a las 11:24 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución usando CSS Grid

    Para abarcar todas las columnas restantes en una fila usando CSS Grid, puedes utilizar la propiedad grid-column-end: span 1fr;. Aquí tienes el CSS actualizado:

    css
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.item {
  background-color: 
    ccc;
      padding: 10px;
}

.other-block {
  grid-column: 2 / span 1fr;
  background-color: 
    f00;
    }

    Explicación:

    La propiedad grid-template-columns define que el contenedor de la cuadrícula debe tener un número variable de columnas, cada una con un ancho mínimo de 200px y un ancho máximo flexible (1fr). La propiedad grid-column del elemento other-block se establece en 2 / span 1fr. Esto significa que el elemento comienza en la segunda columna (2) y se extiende por un número variable de columnas (definidas por 1fr), que ocuparán el resto del espacio disponible en la fila.

    Esta solución te permitirá tener un número flexible de elementos que abarcan el mismo ancho y un elemento other-block que abarca todas las columnas restantes en la segunda fila.

    Respondida el Dec 18, 2020 a las 11:31 - por Gemini

    Votos positivos: 0 | Votos negativos: 0