--- title: "Размеры и расположение плиток в Smart Tiles" description: "Как располагаются плитки в веб-части Vitextra Smart Tiles: шесть размеров плиток от «Очень маленький» до «Во всю ширину» и доля ряда, которую занимает каждый, как плитки переносятся и растягиваются, заполняя ряды, настройки «Внутренний Отступ», «Отступ значка» и «Внешний Отступ», высота плиток и рецепты компоновки для разделов, колонок и панелей во всю ширину." url: https://vitextra.com/ru/support/kb/10247 language: ru published: 2026-10-09 modified: 2026-10-10 products: - "Smart Tiles" author: "Lidija Reising" tags: ["размер плиток Smart Tiles", "ширина плитки SharePoint", "плитка Очень маленький Во всю ширину", "расположение плиток SharePoint Online", "отступы между плитками", "Внешний Отступ", "Внутренний Отступ", "адаптивные плитки SharePoint", "плитки в разделе во всю ширину", "компоновка Vitextra Smart Tiles"] --- # Размеры и расположение плиток в Smart Tiles Как располагаются плитки в веб-части Vitextra Smart Tiles: шесть размеров плиток от «Очень маленький» до «Во всю ширину» и доля ряда, которую занимает каждый, как плитки переносятся и растягиваются, заполняя ряды, настройки «Внутренний Отступ», «Отступ значка» и «Внешний Отступ», высота плиток и рецепты компоновки для разделов, колонок и панелей во всю ширину. ## Введение Панель в [Smart Tiles](https://vitextra.com/ru/products/smart-tiles) — не фиксированная сетка. Плитки выстраиваются в ряды, как слова в строки: каждая плитка запрашивает долю ряда в соответствии со своей настройкой **Размер**, ряд заполняется слева направо, а то, что не помещается, начинает следующий ряд. Понимание этого потока и отличает панель, которая случайно хорошо выглядит на одном экране, от панели, которая выглядит продуманной на любом экране. В этой статье объясняются размеры, отступы и высота плиток, а также приводится несколько рецептов компоновки. ## Шесть размеров Размер плитки — это её ширина, выраженная как доля ряда. Выберите его в контекстном меню плитки: нажмите кнопку **…**, наведите указатель на **Размер** и выберите один из шести пунктов; текущий размер отмечен галочкой. |::Размер::|::Базовая доля ряда::|::Плиток в ряду (одного размера)::| |:---|:---|:---| |**Очень маленький**|15 %|6| |**Маленький**|30 %|3| |**Средний**|45 %|2| |**Крупный**|65 %|1, рядом помещается плитка «Маленький» или «Очень маленький»| |**Очень крупный**|80 %|1, рядом помещается плитка «Очень маленький»| |**Во всю ширину**|100 %|1| ![Шесть размеров плиток](https://static.vitextra.com/articles/10247/tile-sizes-ru.png) *Шесть размеров плиток* Новая плитка имеет размер **Маленький**. ### Как заполняются ряды Картину дополняют два правила: 1. **Плитки растягиваются, заполняя ряд.** Доля в таблице — это минимум. Когда в ряду остаётся место — скажем, две плитки «Маленький» одни в ряду, — плитки растут, заполняя его, причём более крупные размеры растут быстрее мелких. Поэтому ряды всегда заполнены, без рваного правого края. 2. **Плитка, которая не помещается, переходит в следующий ряд.** Три плитки «Маленький» заполняют ряд; четвёртая начинает новый. Плитка «Средний» после двух плиток «Маленький» не помещается в оставшиеся 40 % и начинает новый ряд, где растягивается на всю ширину, если за ней ничего не следует. Второе правило и преподносит сюрпризы: одна плитка «Маленький» в конце панели будет растянута до плитки во всю ширину. Считайте доли в каждом ряду — в сумме они должны давать примерно 90–100 % — или завершайте панель плитками, которые заполняют свой ряд точно. ![Одиночная плитка растягивается, заполняя свой ряд](https://static.vitextra.com/articles/10247/row-filling-ru.png) *Одиночная плитка растягивается, заполняя свой ряд* 📝 **Заметка** Доли отсчитываются от ширины веб-части, а не экрана. В разделе с двумя колонками веб-часть вдвое уже, поэтому три плитки «Маленький» по-прежнему образуют один ряд — каждая из них вдвое уже, чем в разделе во всю ширину. На телефоне, где страница представляет собой одну узкую колонку, плитки остаются в тех же рядах и просто становятся уже. ## Высота Высота плитки напрямую не задаётся. Она складывается из содержимого — значка в размере, заданном настройкой **Размер значка**, заголовка в размере, заданном настройкой **Размер шрифта**, и описания, если оно показывается, — и настройки **Внутренний Отступ** над содержимым и под ним. Все плитки в ряду имеют одинаковую высоту — высоту самой высокой. Чтобы сделать плитки выше, не увеличивая значок или текст, увеличьте **Внутренний Отступ**; чтобы сделать их близкими к квадрату, сочетайте большой внутренний отступ с плитками «Маленький» или «Очень маленький». ## Три отступа В группе **Вид** области свойств есть три настройки интервалов, каждая от 0 до 30 пикселей: |::Настройка::|::Что разделяет::| |:---|:---| |**Внутренний Отступ**|Над содержимым плитки и под ним — «padding». Определяет высоту плиток.| |**Отступ значка**|Между значком и заголовком.| |**Внешний Отступ**|Между соседними плитками, по горизонтали и по вертикали — «gap». При 0 плитки соприкасаются, и панель становится сплошной мозаикой; при 10–16 плитки воспринимаются как отдельные карточки.| ![Внешний и внутренний отступ](https://static.vitextra.com/articles/10247/indents-ru.png) *Внешний и внутренний отступ* ## Рецепты компоновки **Панель быстрых ссылок.** Шесть плиток «Очень маленький», внешний отступ 4, внутренний отступ 8, заголовки показаны, описания скрыты. Один ряд компактных кнопок под главным баннером домашней страницы. **Панель подразделения.** Плитка «Во всю ширину» как заголовок панели — фоновая фотография и название подразделения, — за которой следуют ряды из трёх плиток «Маленький» с услугами подразделения. Внешний отступ 8. **Главное плюс список.** Одна плитка «Крупный» с фоновым изображением и описанием и одна плитка «Маленький» рядом с ней; ниже — два ряда по три плитки «Маленький». Плитка «Крупный» привлекает взгляд к самой важной ссылке. **Мозаика.** Смешанные плитки «Очень маленький» и «Маленький» с внешним отступом 0, все в акцентных цветах, только значки (заголовки скрыты). Лучше всего выглядит в ::разделе во всю ширину:: на информационном сайте. 💡 **Совет** Стройте панель в разделе во всю ширину, если она является основной навигацией страницы; см. статью [KB10042. Как добавить и настроить веб-часть Smart Tiles](https://vitextra.com/ru/support/kb/10042). О текстах на плитках см. статью [KB10249. Отображение заголовков и описаний на плитках](https://vitextra.com/ru/support/kb/10249). ❗ **Важно** Перед публикацией проверьте панель при узкой ширине окна — сузьте окно браузера или воспользуйтесь мобильным предпросмотром страницы. Длинные заголовки, помещающиеся на плитке «Во всю ширину», на плитке «Маленький» обрезаются многоточием; описание, если оно не помещается, обрезается так же. Подробнее о продукте: