TL;DR: ¿Existe algo parecido a table-layout: fixed
para rejillas CSS?
Intenté crear un calendario con vista anual con una cuadrícula grande de 4x3 para los meses y en ella 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 tiene una anchura y una altura del 100% cada una.
.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í's un ejemplo de trabajo: https://codepen.io/loilo/full/ryXLpO/
Para simplificar, cada mes en esa pluma allí tiene 31 días y comienza en 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 los números de los días sean demasiado grandes (siéntase libre de jugar con el tamaño de la fuente en el bolígrafo usando los botones de la parte superior izquierda) la cuadrícula simplemente crecerá en tamaño y excederá el tamaño del cuerpo de la página.
¿Hay alguna forma de evitar este comportamiento?
Inicialmente declaré que la cuadrícula de mi año debía tener una anchura y altura del 100%, así que probablemente ese sea el punto de partida, pero no pude encontrar ninguna propiedad CSS relacionada con la cuadrícula que se ajustara a esa necesidad.
Disclaimer: Soy consciente de que hay formas bastante sencillas de dar estilo a ese calendario sin usar CSS Grid Layout. Sin embargo, esta pregunta se refiere más a los conocimientos generales sobre el tema que a la resolución del ejemplo concreto.
Por defecto, un elemento de la 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
.
Puedes anular este comportamiento configurando los elementos de la rejilla con 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 la cuadrícula Elementos
Para proporcionar un tamaño mínimo por defecto más razonable para los elementos de la rejilla, esta define que el valor
auto
demin-width
/min-height
también aplica un tamaño mínimo automático en el eje especificado a los elementos de la rejilla cuyooverflow
esvisible
. (El efecto es análogo al tamaño mínimo automático impuesto a los elementos flex).
Aquí encontrará una explicación más detallada sobre los elementos flexibles, pero también se aplica a los elementos de la rejilla:
Este post también cubre problemas potenciales con contenedores anidados y diferencias de renderizado conocidas entre los principales navegadores.
Para arreglar tu diseño, haz estos ajustes en tu 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 */
}
1fr
vs minmax(0, 1fr)
La solución anterior funciona a nivel de elemento de la rejilla. Para una solución a nivel de contenedor, ver este post:
Las respuestas existentes resuelven la mayoría de los casos. Sin embargo, me encontré con un caso en el que necesitaba que el contenido de la celda de la cuadrícula fuera overflow: visible
. Lo resolví posicionando absolutamente dentro de un wrapper (no es lo ideal, pero es lo mejor que conozco), así:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
fondo: #fff
grid-gap: 2px;
}
.day-item-wrapper {
position: relative;
}
.day-item {
position: absolute
top: 0;
left: 0
derecha: 0
inferior: 0;
relleno: 10px;
fondo: rgba(0,0,0,0.1);
}