¿Cómo hago para que el primer elemento de la cuadrícula abarque el 100 %?

Preguntas HTML
⏰ 3 minutos de lectura

Avatar de usuario de Al-76
Al-76

Tengo lo siguiente para el escritorio, que crea 4 columnas iguales, todas al 25%. 

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Sin embargo, ¿cómo puedo cambiar el tamaño de estos en una consulta de medios para que la primera columna vaya al 100 % y el resto de las columnas se ajusten naturalmente debajo y ahora el 33,333 % siga usando cuadrículas CSS?

.footer-inner {
  display: grid;
  grid-template-columns: 100% 1fr 1fr 1fr; 
  /* AND THIS */
  grid-template-columns: 100% 33.333% 33.333% 33.333%;
}

Cambie la cuadrícula a tres columnas y configure el primer div para abarcarlas todas en el punto apropiado.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer-inner div {
  border: 1px solid grey;
  text-align: center;
}

.footer-inner :first-child {
  grid-column: 1 / -1;
}
<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

  • Impresionante respuesta, agregaría para cualquier desarrollador de Magento (sí, es un poco tenue) que si quiere hacer esto con .lib-css() Deberías usar grid-column-start, 1 y grid-column-end, -1 en vez de grid-column taquigrafía

    –Scott Anderson

    15 de diciembre de 2020 a las 13:31

Puedes hacerlo con el grid-column: span 3 puesto en el :first-child:

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 650px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-inner > div:first-child {
    grid-column: span 3;
    border: 1px solid;
  }
}
<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Avatar de usuario de Michael Benjamin
miguel benjamin

Aquí hay un método muy simple. Solo necesitas tres líneas de código.

Para pantallas anchas:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div {
  grid-row: 1;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}
<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Para pantallas estrechas:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div:first-child {
  grid-column: span 3;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}
<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Explicaciones

pantallas anchas

Él grid-auto-columns La propiedad establece el ancho de las columnas implícitas. Al establecer el valor en 1fr, todas las columnas creadas consumirán una distribución equitativa de espacio libre en la fila. Con grid-row: 1 aplicado a todos los elementos, aparecerán en la primera fila.

pantallas estrechas

Una vez que configura el primer elemento para que abarque tres columnas implícitas, el contenedor debe crear tres columnas. Los elementos restantes pueden encajar perfectamente debajo en las columnas recién creadas.

Por último, considere usar fr unidades en lugar de porcentajes (como 33.33%) en el tamaño de su pista. Entonces no tiene que preocuparse por tener en cuenta los márgenes y las brechas de la cuadrícula. Aquí hay más información: La diferencia entre el porcentaje y las unidades fr en el diseño de cuadrícula CSS

¿Ha sido útil esta solución?