CSS fit-content() — розмір за вмістом із обмеженням

Опис

Функція fit-content() в CSS дозволяє визначати розмір елемента на основі його вмісту та заданих зовнішніх обмежень. Ця особливість є корисною у випадках, коли елемент повинен вміщати свій вміст, але при цьому не перевищувати вказані граничні значення.

Ось короткий приклад використання функції fit-content():

.container {
  width: fit-content(200px);
  height: fit-content(150px);
  background-color: lightblue;
}

У цьому випадку, контейнер, позначений класом .container, має властивості width і height, які використовують функцію fit-content() з обмеженнями 200 пікселів для ширини та 150 пікселів для висоти. Це означає, що контейнер автоматично займе мінімальний можливий розмір, що вміщує його вміст, але не перевищує вказаних обмежень. Фон контейнера встановлено світло-синім кольором для наглядності.

fit-content() може бути надзвичайно корисною, коли потрібно створити контейнер, який займає мінімальний можливий розмір, що вміщує його вміст, але не перевищує заданого обмеження. Ця функція зазвичай використовується разом з властивостями width або height, щоб встановити пропорційний розмір елемента.

правити

Загальний опис

правити

Нотатка

Функція fit-content() часто використовується разом з іншими CSS властивостями, такими як grid-template-columns, grid-template-rows, flex-basis, тощо, для створення гнучкого макету, який адаптується до розміру вмісту.

автор: Bond правити

Нотатка

У функції fit-content() можна використовувати значення довжини або відсотка для задання максимальної ширини або висоти елемента. Наприклад, fit-content(50%) обмежить розмір елемента до половини ширини або висоти контейнера.

автор: Bond правити

Нотатка

Варто відзначити, що підтримка функції fit-content() може залежати від браузера і може бути обмежена на деяких платформах або версіях. Для докладнішої інформації про підтримку і сумісність функції fit-content() рекомендується перевірити секцію "Переглядачі".

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

fit-content(<length-percentage>);

Функція fit-content може отримувати єдине значення:

<length-percentage>

Довжина або відсоток, які вказують максимальну ширину або висоту елемента. Можна використовувати значення, такі як px, em, rem, vw, vh, vmin, vmax, відсотки, тощо. Це значення встановлює максимальну межу розміру елемента.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	57	52	10.1	44	16

Підтримка: мобільні переглядачі

Переглядач
	57	57	52	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 1: Динамічний макет сайту</h2>
  <p>Змінюй розмір вікна браузера, щоб побачити, як елементи адаптуються.</p>
  <p>Функція fit-content() забезпечує те, що ширина елемента .content автоматично адаптується до його вмісту, але не перевищує 80% доступного простору, що дозволяє контенту бути відображеним зручно та ефективно всередині макету сайту.</p>
</div>
<div id="result">
  <div class="grid">
    <div class="header">Заголовок</div>
    <div class="sidebar">Бічна панель</div>
    <div class="content">Контент</div>
    <div class="footer">Футер</div>
  </div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: auto;
  grid-gap: 10px;
  background-color: #f0f0f0;
  padding: 20px;
}

.header,
.sidebar,
.content,
.footer {
  background-color: white;
  padding: 20px;
  border: 1px solid #ccc;
}

.header {
  grid-column: 1 / -1;
}

.sidebar {
  grid-row: 2 / span 2;
}

.footer {
  grid-column: 1 / -1;
}

.content {
  grid-column: 2 / -2;
  width: fit-content(80%);
  margin: 0 auto;
}

<div class="grid">
    <div class="a">коротко</div>
    <div class="b">друга колонка</div>
</div>

<div class="grid">
    <div class="a">кілька слів, які могли б зайняти набагато більше місця в рядку</div>
    <div class="b">друга колонка</div>
</div>

<div class="grid">
    <div class="a">Дуже_довге_нерозривне_слово</div>
    <div class="b">друга колонка</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.45;
    padding: 24px;
}

.grid {
    display: grid;
    grid-template-columns: fit-content(150px) 1fr;
    gap: 10px;
    width: 520px;
    margin-bottom: 14px;
}

.a {
    padding: 10px;
    background: #2f6f9f;
    color: #fff;
}

.b {
    padding: 10px;
    background: #e3e8ee;
}