es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • CSS, GRID, intentando mantener el tamaño de la cuadrícula en formato 3×3 mientras se desplaza el exceso con desplazamiento de desborde

CSS, GRID, intentando mantener el tamaño de la cuadrícula en formato 3×3 mientras se desplaza el exceso con desplazamiento de desborde

26 Jul, 2023 Programación

Quiero que la cuadrícula no sea más grande que 3X3 y luego haga scroll al resto… ¡Se ve genial para 9 cajas o menos jajaja!

Este es el aspecto que me gusta, pero solo funciona con 9 cajas o menos: Wanted

Sin embargo, cualquier cantidad distinta de 9 me muestra esto: not wanted

column-count: 3: not wanted

.container{
    height: 70vh;
    width: 80vw;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll; 
}

.container::-webkit-scrollbar {
    display: none;
}

.box{
    margin: 2%;
    background-color: blueviolet;
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>Routing🖥️</title>
</head>
<body>
    <div class="container">
        {% for i in range(num) %}
        <div class="box">hi</div>
        {% endfor %}
    </div>
</body>
</html>

Objetivo: Mostrar solo el 3X3 y hacer scroll en el resto (al mismo tamaño). Por favor, ayúdame a resolver mi problema de desbordamiento.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr el objetivo de tener una cuadrícula de 3×3 y luego hacer desplazamiento del resto, se deben realizar los siguientes cambios en el CSS:

    .container{
    height: 70vh;
    width: 80vw;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* especificar que el número de columnas sea 3 */
    grid-auto-rows: minmax(0, 1fr); /* especificar que la altura de cada fila sea igual */
    max-height: calc(100% - 40px); /* establecer una altura máxima para el contenedor que deje espacio para la barra de desplazamiento */
    overflow-y: auto; /* habilitar el desplazamiento vertical */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.container::-webkit-scrollbar {
    display: none;
}

.box{
    margin: 2%;
    background-color: blueviolet;
}

    Explicación de los cambios:

    • Usar grid-template-columns para especificar que el número de columnas sea 3 y establecer el ancho mínimo de cada columna en 0 y el ancho máximo en 1fr (esto permite que las columnas se estiren para llenar el espacio disponible).
    • Usar grid-auto-rows para especificar que la altura de cada fila sea igual (esto asegura que todas las cajas tengan la misma altura).
    • Establecer una max-height para el contenedor que deje espacio para la barra de desplazamiento. El valor de 40px es una estimación del ancho de la barra de desplazamiento, pero es posible que necesite ajustarlo dependiendo de su navegador y sistema operativo.
    • Establecer overflow-y en auto para habilitar el desplazamiento vertical cuando el contenido desborde el contenedor.
    • Usar el selector ::-webkit-scrollbar para ocultar la barra de desplazamiento en navegadores basados en WebKit (Safari, Chrome). Las propiedades -ms-overflow-style y scrollbar-width se utilizan para los navegadores de Microsoft (Edge).

    Con estos cambios, la cuadrícula siempre será de 3×3 y cualquier caja adicional estará oculta y se podrá acceder a ella mediante el desplazamiento.

Comments are closed.