Параметр 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
он будет их располагать их рядом таким образом, чтобы они главное помещались в том размере, который был задан в параметре.