Как значение свойства grid-template-columns: repeat(auto-fit, 1fr) понимает какой размер задавать блокам?

Question

Экспериментирую с grid. И уже возник вопрос. Как с помощью данного свойства браузер понимает, сколько нужно выделить места для условных карточек?

1fr - 1 колонка с установленным размером зависящим от ширины окна

К примеру если, записать grid-template-columns: repeat(3, 1fr) - страница поделится на 3 равных блока. Но как браузер понимает какой размер задавать колонкам при (auto-fit, 1fr)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .wrap{
            background-color: green;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-column-gap: 20px;
            grid-row-gap: 10px;
        }
        .rect{
            background-color: red;
            border: 5px solid wheat;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
        <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    </div>
</body>
</html>

Answer 1

Эти 2 параметра - auto-fill и auto-fit в grid-template очень интересны и полезны.
В том плане, что они предоставляют возможно создавать удобные и динамические таблицы.

Суть их заключается в том, чтобы адаптировать колонки и строки таким образом, чтобы было использовано всё пространство экрана.

Между собой эти 2 свойства очень похожи, с одним небольшим различием.

При помощи обоих данных свойств - мы задаём браузеру необходимость помещать в одну строку столько колонок, сколько будет возможно, в зависимости от заданной ширины.
Перенося на следующую строку те колонки, которые не поместились по размеру.
Пример 1 (ширина колонок 100px):
В данном случае, если общая сумма ширины колонок будет меньше ширины окна браузера, то он оставит пустое место справа.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
        padding: 0;
    }
    .wrap{
        background-color: green;
        display: grid;
        grid-template-columns: repeat(auto-fill, 100px);
        grid-column-gap: 20px;
        grid-row-gap: 10px;
    }
    .rect{
        background-color: red;
        border: 5px solid wheat;
    }
</style>
</head>
<body>
<div class="wrap">
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
<div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
</div>
</body>
</html>

В Вашем примере (auto-fit, 1fr) колонка будет размеров с 1 фрагмент, то есть максимальный.
Проще говоря - он растянет одну колонку на ширину доступного экрана.
Выглядеть эту будет следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
        }
        .wrap{
            background-color: green;
            display: grid;
            grid-template-columns: repeat(auto-fit, 1fr);
            grid-column-gap: 20px;
            grid-row-gap: 10px;
        }
        .rect{
            background-color: red;
            border: 5px solid wheat;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
</div>
</body>
</html>

Но для того, чтобы использовать несколько колонок, используется параметр minmax, который указывает свойству auto-fit минимальную и максимальную ширину колонки.
В зависимости от которой, он будет помещать элементы отталкиваясь от минимальной ширины колонки, и в тоже время иметь возможность растянуть на максимальную ширину фрагмента, если это будет доступно.

Алгоритм его работы будет очень прост - свойство auto-fit будет брать минимальную заданную ширину колонки, смотреть сколько таких колонок помещается в одну строку, перенося все не влезшие на следующую строку.
Всё свободное пространство, данное свойство берёт и распределяет равномерно на количество поместившихся в строке колонок.
Условный пример:
У Вас ширина окна браузера - 1100px. Вы задали параметр repeat(auto-fit, minmax(200px, 1fr)); В этом случае, в одну строку будут помещаться 5 колонок по ширине 200px(остальные колонки перенесутся на следующую строку), а всё оставшееся пространство в этой строке - (1100px - 5*200px)=100px
Вот эти оставшиеся 100px свойство разделит на количество колонок в строке(в нашем случае 5) и добавит к каждой колонке получившееся значение. (100px/5=20px)
То есть каждая колонка получится по ширине не 200px, как было задано в минимальном значении, а 220px. Пример(Задал фиксированную ширину 1100px и убрал отступы gap чтобы более явно было видно):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            padding: 0;
            width: 1100px;
        }
        .wrap{
            background-color: green;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
        .rect{
            background-color: red;
            border: 5px solid wheat;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
    <div class="rect">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore rem ullam consectetur illo. Id unde expedita pariatur quia, ipsam quo aperiam ex, harum nisi, reprehenderit eligendi voluptatem omnis ad voluptate.</div>
</div>
</body>
</html>

Что касается отличий auto-fill от auto-fit, то оно не значительное, но очень интересное. А именно, схлопывание колонки пустого элемента,
Если будет необходимость для детальных прояснений, чтобы не делать данный пост киллометровым (А там необходимо именно показывать), при желании смогу расписать в другом сообщении.

БЛОГ НА HUSL

Как значение свойства grid-template-columns: repeat(auto-fit, 1fr) понимает какой размер задавать блокам?

Ответы (1 шт):