css - examples - Evitar que el contenido expanda elementos de cuadrícula

title html

Question

TL; DR: ¿Hay algo como table-layout: fixed para cuadrículas CSS?

Traté de crear un calendario de vista anual con una gran cuadrícula de 4x3 para los meses y en él cuadrículas anidadas de 7x6 para los días.

El calendario debe llenar la página, por lo que el contenedor de la cuadrícula del año obtiene un ancho y una altura del 100% cada uno.

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

Aquí hay un ejemplo de trabajo: https://codepen.io/loilo/full/ryXLpO/

Para simplificar, cada mes en ese bolígrafo tiene 31 días y comienza un lunes.

También elegí un tamaño de fuente ridículamente pequeño para demostrar el problema:

Los elementos de la cuadrícula (= celdas de día) están bastante condensados, ya que hay varios cientos de ellos en la página. Y tan pronto como las etiquetas de número de día se vuelvan demasiado grandes (siéntase libre de jugar con el tamaño de fuente en el lápiz usando los botones en la esquina superior izquierda) la cuadrícula crecerá en tamaño y excederá el tamaño del cuerpo de la página.

¿Hay alguna forma de prevenir este comportamiento?

Inicialmente, dije que mi cuadrícula de año tenía un 100% de ancho y alto, por lo que probablemente ese sea el punto de partida, pero no pude encontrar ninguna propiedad CSS relacionada con la cuadrícula que pudiera satisfacer esa necesidad.

Descargo de responsabilidad: Soy consciente de que hay formas bastante sencillas de diseñar ese calendario sin usar CSS Grid Layout. Sin embargo, esta pregunta es más sobre el conocimiento general sobre el tema que la solución del ejemplo concreto.

Answer 1

La respuesta anterior es bastante buena, pero también quería mencionar que hay un diseño fijo equivalente para las cuadrículas, solo necesita escribir minmax(0, 1fr) lugar de 1fr como el tamaño de su pista.

Answer 2

Por defecto, un elemento de cuadrícula no puede ser más pequeño que el tamaño de su contenido.

Los elementos de la cuadrícula tienen un tamaño inicial de min-width: auto y min-height: auto .

Puede anular este comportamiento estableciendo elementos de cuadrícula en min-width: 0 , min-height: 0 o overflow con cualquier valor que no sea visible .

De la especificación:

6.6. Tamaño mínimo automático de elementos de cuadrícula

Para proporcionar un tamaño mínimo predeterminado más razonable para los elementos de la cuadrícula, esta especificación define que el valor auto de min-width / min-height también aplica un tamaño mínimo automático en el eje especificado a los elementos de la cuadrícula cuyo overflow es visible . (El efecto es análogo al tamaño mínimo automático impuesto a los artículos flexibles).

Aquí hay una explicación más detallada que cubre los elementos flexibles, pero también se aplica a los elementos de la cuadrícula:

• ¿Por qué los elementos flexibles no reducen el tamaño del contenido?

Esta publicación también cubre problemas potenciales con contenedores anidados y diferencias de representación conocidas entre los principales navegadores .

Para arreglar su diseño, realice estos ajustes en su código:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

codepen revisado

1fr vs minmax(0, 1fr)

La solución anterior funciona a nivel de elemento de cuadrícula. Para una solución a nivel de contenedor, vea esta publicación:

• ¿Cómo es que minmax (0, 1fr) funciona para elementos largos mientras que 1fr no?