8

.grid{
  display: grid;
  grid-template-columns: fit-content(300px) minmax(auto, 600px);
  grid-gap: 10px;
  grid-template-rows: 1fr, 1fr;
}
<div class="grid">
  <div class="">111111111111111111111111111111111111111111111111</div>
  <div class="">1</div>
  <div class="">1</div>
  <div class="">1</div>
</div>

1 ответ 1

15

Параметр grid по своей сути - это двумерная сетка, представляющая собой табличную форму для работы с элементами, где есть количество столбцов и количество строк.
Он используется для того, чтобы можно было конкретный элемент разместить в нужное место на странице, придерживаясь общей концепции табличного отображения.

При помощи параметров grid Вы можете перемещать и задавать элементы таким образом, чтобы это не нарушало необходимую структуру отображения.
Как Вы знаете, при помощи параметров grid можно делать достаточно много потрясающих вариаций отображения, задавая ширину столбцов, высоту, возможность склейки нескольких ячеек и так далее.

Если же брать именно параметр fit-content, то его задача ограничить ширину отображаемого поля.
Например, в случае использования grid-template-columns или grid-template-rows в своём стандартном значении они имеют параметр auto auto, что означает, что данные поля сетки будут подстраиваться под размер контента, который в них находится.
Пример с использованием автоматического размера контента:

    .grid{
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
<div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fkdsjhfkl shfkjhdsk jfhsdkjhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

В данном случае, размеры ячеек сетки задаются в соответсвии с размером текста, который в них находится. (Если текста больше. то колонка шире или выше соответственно)

Свойство fit-content позволяет, в случае необходимости задать минимальную длину ячейки, уже не полагаясь исключительно на размер контента внутри, но ограничивается указанным параметром в соответствии с длинной элементов к контенте.

Например, используя фиксированные параметры в grid-template-columns: например grid-template-columns: auto 10px; Находящиеся внутри объекты будут обрезаться ровно по указанному размеру в 10px.

Пример:

    .grid{
        display: grid;
        grid-template-columns: auto 10px;
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
<div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fkdsjhfkl shfkjhdsk jfhsdkjhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

Используя же параметр fit-content размер ячейки будет стремиться к указанному в нём параметру, основываясь на длине элементов, находящихся в них.
Если простыми словами, то он будет подстраиваться под размер слов до пробела, или элементов до разделения, но всегда будет стремиться к указанному размеру переданному в fit-content. Например:

    .grid{
        display: grid;
        grid-template-columns: auto fit-content(10px);
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
<div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fkdsjhfkl shfkjhdsk jfhsdkjhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

Как Вы видите, размер поля не составляет 10px, но всегда к нему стремится.
В данном случае, параметр fit-content проверяет длину находящихся в них элементов и задаёт размер по самому длинному слову.
Если же параметр будет ниже указанного размера, то он будет составлять именно столько, сколько указано в fit-content. Пример (указан параметр в 100px для демонстрации):

    .grid{
        display: grid;
        grid-template-columns: auto fit-content(100px);
        grid-gap: 10px;
        grid-template-rows: auto auto;
    }
<div class="grid">
    <div class="">111111111111111111111111111111111111111111111111</div>
    <div class="">1fk dsj hfk l shf kjh dsk jfh sdk jhf</div>
    <div class="">1</div>
    <div class="">1</div>
</div>

В данном случае, размер колонки будет минимально - 100px.

Итоги:
Параметр fit-content при максимальном размере элементов в нём будет автоматически расширять размер колонки в соответствии с контентом (В отличии от фиксированных данных в 10px), но минимальное значение, при элементах меньше, чем заданы в fit-content он будет их располагать их рядом таким образом, чтобы они главное помещались в том размере, который был задан в параметре.

3
  • 1
    fill-content(10px) позволяет указать минимальное значение но если контент больше 10px то grid-template-columns будет расширяться до первого разделителя ( пробела ) правильно для себя сформулировал св-во fill-content ?
    – Leks
    23 янв 2020 в 22:17
  • @Leks всё верно.
    – Denis640Kb
    23 янв 2020 в 22:21
  • 1
    @Denis640Kb Отличный ответ Мне особенно понравился стиль изложения, - и не очень длинно и не очень кратко, ровно столько, сколько нужно для понимания, на мой взгляд важной темы в целом, как grid 24 янв 2020 в 7:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.