# Сделать Gantt адаптивным

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

Если задавать размеры Gantt в процентах (например, `width: 100%; height: 100%`), он подстроится под доступную ширину контейнера. Однако по умолчанию каждая колонка грид имеет минимальную ширину, определяемую параметрами [`min_column_width`](api/config/min_column_width.md) и [`min_grid_column_width`](api/config/min_grid_column_width.md). Если ширина контейнера становится меньше общей минимальной ширины колонок, грид перестает сжиматься. Это может создать впечатление, что Gantt не адаптивен. Ниже приведены способы решить это и сделать Gantt по-настоящему адаптивным.

### Настройка минимальной ширины колонок

Один из подходов — уменьшить значения [`min_column_width`](api/config/min_column_width.md) и [`min_grid_column_width`](api/config/min_grid_column_width.md). Это позволяет Gantt сжиматься дальше по мере уменьшения контейнера, создавая поведение, близкое к адаптивному:

~~~jsx
gantt.config.min_column_width = 30;
gantt.config.min_grid_column_width = 30;
~~~

**Связанный пример** [Gantt. Адаптивный контейнер](https://snippet.dhtmlx.com/kjibqqbb)

### Настройка макета для маленьких экранов

Еще один подход — переключать макет Gantt в зависимости от доступной ширины. Когда места достаточно, отображается полный макет с обеими частями: грид и таймлайн. На узких экранах вместо этого отображается либо грид, либо таймлайн, чтобы лучше использовать доступное пространство.

Это можно реализовать с помощью события [`onGanttRender`](api/event/onganttrender.md). Обработчик события проверяет ширину контейнера Gantt, текущую конфигурацию [layout](api/config/layout.md) и обновляет макет Gantt соответствующим образом.

**Связанный пример** [Gantt. Адаптивный макет: динамическое скрытие/показ грид в зависимости от ширины экрана](https://snippet.dhtmlx.com/w4nwk5wf)