Prevención de un reventón de la red | Programar Plus

Supongamos que tiene un diseño de cuadrícula CSS muy simple con una columna fija en 300px y otro ocupando el resto del espacio en 1fr.

.grid {
  display: grid;
  grid-template-columns: 1fr 300px;
}

Eso es algo robusto. Ese 1fr columna ocupará cualquier espacio restante dejado por el fijo 300px columna. Es cierto que el auto el valor haría lo mismo, pero auto no es tan robusto ya que su tamaño se basa en el contenido que contiene. Por lo tanto, si tiene muy poco contenido, es posible que su columna no llene todo el espacio que desea. Pero mientras 1fr es un poco más robusto, ¡no te protegerá del contenido que sea demasiado grande!

Aquí está la cuadrícula que se comporta bien con algún contenido de texto:

Ahora, observe cómo la columna de la derecha desaparece de la página cuando dejamos caer una imagen gigantesca en esa columna:

Ese es fácil de solucionar, y es posible que nunca te suceda, porque este fragmento es muy común en nuestras hojas de estilo:

img {
  max-width: 100%;
}

Pero algunos elementos no son tan amigables. Toma lo notorio <pre> etiqueta. Digamos que lanzamos uno de esos en nuestro 1fr columna con una larga cadena de texto. Volvemos a naufragar:

¡Esta vez, las cosas no se arreglan tan fácilmente! Incluso intentando limitar el ancho y ocultar el desbordamiento de <pre> no va a ayudar:

pre {
  max-width: 100%;
  overflow: hidden;
}

La solución real no es tan difícil, solo necesitamos entender lo que está sucediendo. No puedo prometer que estoy explicando esto con 100% de precisión, pero de la forma en que lo entiendo, el ancho mínimo de una columna de cuadrícula es auto. (Por cierto, lo mismo ocurre con los elementos flexibles).

Y desde auto se basa completamente en el contenido, podemos decir que tiene un tamaño “indefinido”, sus dimensiones son flexibles. Si tuviéramos que poner un ancho explícito en la columna, como 50% o 400px, entonces diríamos que tiene un tamaño “definitivamente”.

Para aplicar nuestra corrección, debemos asegurarnos de que la columna tenga una definido ancho mínimo en lugar de auto.

Entonces, podemos arreglarlo así:

.grid {
  /* auto minimum width, causing problem */
  grid-template-columns: 1fr 300px;

  /* fix: minimum width of 0 */
  grid-template-columns: minmax(0, 1fr) 300px;
}

O nosotros poner un real min-width en el elemento que ocupa esa columna de la cuadrícula. En nuestra demostración simple, el <main> El elemento se coloca automáticamente en esa primera columna, ya que es el primer elemento secundario de la cuadrícula.

Eso nos da esto:

main {
  min-width: 0;
}

Creo que es un poco más robusto hacer esto en el nivel de definición de cuadrícula. De todos modos, ¡funciona! Mira como el <pre> ¿La etiqueta ahora respeta el ancho de la columna y puede desbordarse como se esperaba?

Bonito.