Как выровнять Grid контейнер в Тильде с анимацией логотипов

Если вы используете в Тильде анимацию логотипов на весь экран, но элементы растягиваются неравномерно, проблема часто кроется в неправильной настройке CSS Grid контейнера. В этой статье мы разберём, как добиться идеального выравнивания по грид-сетке, чтобы логотипы отображались ровно, без искажений, и адаптировались под любые экраны.

Почему логотипы растягиваются на весь экран в Тильде?

По умолчанию в Тильде блоки с анимацией (например, бегущая строка или карусель) могут наследовать свойства width: 100% и height: auto, что приводит к растягиванию содержимого. Если вы используете готовый код из примера running-line-logo, то логотипы могут выходить за границы контейнера или сжиматься. Чтобы это исправить, нужно задать правильные параметры grid-контейнера и его дочерних элементов.

Основные настройки Grid для ровного отображения логотипов

Для начала убедитесь, что контейнер, в котором находятся логотипы, объявлен как grid. Это делается с помощью CSS-свойства display: grid. Затем настройте колонки с помощью grid-template-columns. Чтобы логотипы не растягивались, используйте фиксированные или адаптивные размеры, например:

• grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - автоматически подстраивает количество колонок под ширину экрана.
• justify-items: center; - выравнивает каждый логотип по центру своей ячейки.
• align-items: center; - выравнивает логотипы по вертикали внутри ячеек.

Также важно задать max-width: 100% для самих изображений логотипов, чтобы они не выходили за пределы ячеек.

Как применить код в Тильде?

В Тильде вы можете добавить собственный CSS через блоки «HTML-код» или «T123». Вставьте следующий код в настройки блока с логотипами:

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.logo-grid img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

Замените класс logo-grid на тот, что используется в вашем проекте, или добавьте его к контейнеру. После этого логотипы будут располагаться ровно, без растягивания на весь экран.

Дополнительные советы по анимации бегущей строки

Если вы используете анимацию бегущей строки, как в примере running-line-logo, убедитесь, что контейнер анимации не переопределяет свойства grid. Для этого оберните анимацию в отдельный блок с фиксированной высотой и задайте overflow: hidden. Также проверьте, что логотипы внутри анимации имеют одинаковые размеры - это можно сделать через width: 100px; height: 50px; (подставьте свои значения).

Частые ошибки и их решение

• Логотипы выходят за экран: добавьте max-width: 100% для контейнера и используйте box-sizing: border-box.
• Анимация ломает сетку: задайте анимации position: relative и z-index, чтобы она не влияла на грид.
• Неравномерные отступы: используйте gap вместо margin для дочерних элементов.

Следуя этим рекомендациям, вы сможете добиться ровного выравнивания логотипов в Тильде, даже при использовании сложной анимации. Если у вас остались вопросы, обратитесь к разделу FAQ ниже.