fr o fracción

Se usa para darles alto o ancho a filas y columnas. Un fr es una fracción de la grilla y se usa declarando, por ejemplo, la cantidad de fracciones que medirá una columna.

Ejemplos:

💚 una grilla con 4 columnas de 100px de ancho y el alto de la fila se ajusta de acuerdo al contenido

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Special Keywords</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div class="container">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3 3 33 3 3 3 3 3 3 3 3 3 3 33333 3333 333</div>
            <div class="item item-4">444 4 4 4 4 4 4 4 4 4444 4444 44 4 4 4 4</div>
        </div>
        
    </body>
</html>

.container {
    border: 5px solid #041091;
    background-color: aliceblue;
    display: grid;
    grid-template-columns: repeat(4, 100px);
}

.item {
    border: 5px solid palevioletred;
    font-size: 2rem;
}

Untitled

💚 una grilla con 4 columnas con un ancho de 1fr (fracción) y el alto de la fila ajustada de acuerdo al contenido: grid-template-columns: repeat(4, 1fr);

.container {
    border: 5px solid #041091;
    background-color: aliceblue;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.item {
    border: 5px solid palevioletred;
    font-size: 2rem;
}

Untitled

Cuando se ocupa fr si el tamaño de la pantalla y contenedor disminuyen o aumentan, el ancho de las columnas se va a ajustar de acuerdo a estos valores.

Untitled

Untitled

Untitled

💚 Tambien se puede ocupar fr para poner distintos tamaños a cada columna: grid-template-columns: 1fr 3fr 1fr 2fr;

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Special Keywords</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div class="container">
            <div class="item item-1">1</div>
            <div class="item item-2">2</div>
            <div class="item item-3">3 3 33 3 3 3 3 3 3 3 3 3 3 33333 3333 333</div>
            <div class="item item-4">444 4 4 4 4 4 4 4 4 4444 4444 44 4 4 4 4</div>
        </div>
        
    </body>
</html>

.container {
    border: 5px solid #041091;
    background-color: aliceblue;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 2fr;
}

.item {
    border: 5px solid palevioletred;
    font-size: 2rem;
}

Untitled

De igual forma, si el tamaño de la pantalla y contenedor disminuyen o aumentan, el ancho de las columnas se va a ajustar de acuerdo a estos valores y en la misma proporción definida.

Untitled

Untitled

Untitled

min-content

Ajusta el ancho de la celda o lo alto de la fila a modo que se tenga la columna mas fina o una fila mas fina que se pueda sin romper el contenido de la misma

Ejemplo:

💚 La misma grilla con la columna 3 con un ancho que se ajuste al tamaño mínimo de acuerdo a su contenido: grid-template-columns: 1fr 3fr min-content 2fr;