Me gustaría tener un diseño de cuadrícula en una página donde la cuadrícula se extienda a toda la ventana gráfica y las filas tengan una altura mínima. El ejemplo más simple sería una cuadrícula con una sola celda (consulte el fragmento de código a continuación).
El problema que tengo es que cuando la altura de la ventana gráfica es menor que la altura de fila mínima definida, la fila desborda verticalmente su contenedor. Con los bordes rojo y verde agregados en el siguiente ejemplo, es visible que la altura de la fila no está por debajo de los 500 píxeles definidos, pero el contenedor de la cuadrícula aún tiene el tamaño de la ventana gráfica, que ahora tiene menos de 500 píxeles.
Si elimino el atributo CSS de height de la clase de grid , el contenedor no se reduce por debajo de su contenido, pero tampoco llena el espacio vertical cuando la ventana gráfica tiene más de 500 píxeles. Como quiero que la cuadrícula llene toda la página, necesito el atributo CSS de height . También agregué el atributo min-height: fit-content que se supone que evita que el valor usado de la propiedad height sea más pequeño que el valor especificado para min-height pero no funciona (no con el fit-content definido). valor del fit-content : funciona como se esperaba con un valor exacto, por ejemplo, 300px ).
En una pregunta similar, el culpable fueron los valores porcentuales utilizados para los espacios, pero en este caso no hay nada de tamaño relativo. Incluso si reemplaza grid-template-rows: minmax(500px, 1fr); propiedad con grid-template-rows: 500px; , todavía se comporta de la misma manera.
body { margin: 0; } .grid { display: grid; grid-template-rows: minmax(500px, 1fr); height: 100vh; min-height: fit-content; width: 100vw; } .bordered { border: 10px solid green; } <div class="grid bordered" style="border-color: red;"> <div class="bordered">Some content</div> </div>Lo que me gustaría tener es una cuadrícula que llene toda la ventana gráfica y donde el contenedor de la cuadrícula nunca sea más pequeño que su contenido. ¿Qué me estoy perdiendo?
Algo que debe saber es que tan pronto como la altura mínima de una fila, o la altura combinada de varias filas sea mayor que la altura de la ventana gráfica, tendrá un desplazamiento. Más allá de eso, el fragmento a continuación espero que haga lo que está buscando. Agregué comentarios en el código.
/* lines I added */ *{ box-sizing: border-box; } body { margin: 0; } .grid { display: grid; /* 100 is for the small viewport here in the code snippet */ grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); min-height : 100vh; } .bordered { border: 10px solid green; } <div class="grid bordered" style="border-color: red;"> <div class="bordered">Some content</div> </div>