Hay una pregunta de un compañero y también me surgió la duda. Cuando uso auto-fill o auto-fit, cuando contraigo el tamaño de la pantalla ...

Gabriel Hernández Valdez

Pregunta

student•

Hay una pregunta de un compañero y también me surgió la duda. Cuando uso auto-fill o auto-fit, cuando contraigo el tamaño de la pantalla los elementos se recorren y posicionan por debajo, pero la pregunta es ¿por que no se respeta el tamaño de los hijos por el min-max?

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">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section class="container_fit">
        <div class="item_one">1</div>
        <div class="item_two">2</div>
        <div class="item_three">3</div>
    </section>

    <section class="container_fill">
        <div class="item_one">1</div>
        <div class="item_two">2</div>
        <div class="item_three">3</div>
    </section>
</body>
</html>

CSS

body{
    height: 500px;
}

.container_fit{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(50px, 1fr));
    margin-bottom: 10px;
}

.container_fit .item_one{
    background-color: rgb(117, 117, 224);
}

.container_fit .item_two{
    background-color: rgb(78, 177, 127);
}

.container_fit .item_three{
    background-color: rgb(217, 224, 117);
}


.container_fill{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
}

.container_fill .item_one{
    background-color: rgb(117, 117, 224);
}

.container_fill .item_two{
    background-color: rgb(78, 177, 127);
}

.container_fill .item_three{
    background-color: rgb(217, 224, 117);
}

Gabriel Hernández Valdez

student•

Muchas Gracias diegocook me queda claro ahora. :D

Diego Cucaresse

student•

Es muy dificil de comprender y, por todos los profesores que vi hasta ahora, de explicar también. Pero haré mi mejor esfuerzo.

Con auto-fill, al definir el minmax, es como si le diera esta u¡instrucción: apenas puedas crear una nueva columna, CRÉALA!!!. O sea, le da prioridad al min.

¿Cómo funciona esto? Apenas el ancho del view-port permita crear una nueva columna con el min definido, la creará, llevando todas las columnas al min definido en el minmax. Si estiras el view-port, todas las columnas se harán más anchas, buscando el max del minmax, pero, en ese camino llegará primero al min (¡lógico! porque el min es menor que el max), entonces crea una nueva columna y todas las columnas se ajustan. Así sucesivamente.

Espero haber ayudado en algo.

Hay una pregunta de un compañero y también me surgió la duda. Cuando uso auto-fill o auto-fit, cuando contraigo el tamaño de la pantalla ...

Curso de CSS Grid Layout [Empieza Gratis]

Curso de CSS Grid Layout [Empieza Gratis]