es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

CSS GRID: Cómo tomar toda la fila en una posición aleatoria

17 Jul, 2023 Programación

Me estoy volviendo loco con un problema, muy simple, pero no puedo encontrar una solución.

Así que tengo una cuadrícula con 2 columnas e infinitas filas:

Necesitaría mostrar un ADV al 100% en toda una fila, pero no sé cuándo ni dónde se mostrará el ADV.
Puede aparecer después de 6 elementos o después de 10, así que no puedo usar la posición de cuadrícula “span”.

¿Cómo puedo hacer eso?

.grid { display: grid; grid-template-columns: 50% 50%; background-color:#f2f2f2; }
.grid > div { background-color:#999; margin:12px; text-align:center; padding:12px; }
.grid .whole_adv { background-color: red; }


<div class="grid">
  <div>1</div> <div>2</div>
  <div>3</div> <div>4</div>
  <div>5</div> <div>6</div>
  <div>7</div> <div>8</div>
  <div class="whole_adv">100%</div>
  <div>9</div> <div>10</div>
  <div>11</div> <div>12</div>
  <div>13</div> <div>14</div>
  <div class="whole_adv">100%</div>
  <div>15</div> <div>16</div>
</div>

¡Gracias de antemano!

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Dado que no puedes usar “span” porque la posición del elemento ADV es desconocida, una forma de abordar esto podría ser usar JavaScript para agregar dinámicamente una clase a la fila padre del elemento ADV. Esta clase cambiaría la propiedad grid-template-columns a 100% para esa fila, haciendo que el elemento ADV ocupe toda la fila.

    Aquí hay una posible solución usando jQuery:

    $(document).ready(function() {
  var adv_row = $('.whole_adv').parent(); // obtener la fila padre del elemento ADV
  adv_row.addClass('adv_row'); // agregar una clase a la fila
});

    .grid {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color:#f2f2f2;
}

.grid > div {
  background-color:#999;
  margin:12px;
  text-align:center;
  padding:12px;
}

.grid .whole_adv {
  background-color: red;
}

.adv_row {
  grid-template-columns: 100%; /* hacer que la fila ocupe todo el grid */
}

    Esta solución asume que cada fila tiene exactamente dos columnas. Si este no es el caso, es posible que debas ajustar el código en consecuencia. Además, debes tener en cuenta que esta solución requiere JavaScript, por lo que si necesitas una solución pura de CSS, es posible que no sea posible.

Comments are closed.