Оформление колонок в разметке сайта

Теоретическая информация

Стандартная запись 2-х колонок:

<div class="fr-flex-container-fluid">
  <div class="fr-flex-row">
    <div class="fr-flex-col-12 fr-flex-col-md-6"></div>
    <div class="fr-flex-col-12 fr-flex-col-md-6"></div>
  </div>
</div>

Блок с колонками состоит из

• контейнера <div class="fr-flex-container-fluid">
• строк <div class="fr-flex-row">
• колонок <div class="fr-flex-col">. С помощью специальных классов можно установить размеры и положение колонок в строке. Максимальное количество колонок в строке - 12.

Это значит, что при такой записи <div class="fr-flex-col-12"> колонка займет 100% строки.

А при записи <div class="fr-flex-col-6"> - 50%. Таким образом можно задавать размеры колонкам от 1 до 12.

Чтобы управлять шириной колонок и их количеством в зависимости от ширины страницы, следует добавлять класс следующего вида:

fr-flex-col-X-6, где Х - обозначение диапазона значений ширины окна.

Ниже приведена таблица с указанием обозначений этих диапазонов.

		sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px
форма записи класса	flex-col-1	flex-col-sm-1	flex-col-md-1	flex-col-lg-1	flex-col-xl-1

ВНИМАНИЕ! Таким образом, запись <div class="fr-flex-col-12 fr-flex-col-md-6"> будет означать, что на ширине окна от 0 и до 767px включительно колонка будет занимать 100% строки, а с ширины 768px - 6/12 строки (50%).

Можно комбинировать несколько модификаторов. Например:

<div class="fr-flex-row">
  <div class="fr-flex-col-12 fr-flex-col-md-6 fr-flex-col-xl-4"></div>
  <div class="fr-flex-col-12 fr-flex-col-md-6 fr-flex-col-xl-4"></div>
  <div class="fr-flex-col-12 fr-flex-col-md-6 fr-flex-col-xl-4"></div>
</div>

На мобильных устройствах и в окнах шириной менее 768px - в 1 колонку, на ширине от 768px до 1200px - 2, а на ширине окна 1200px и более - 3 колонки (по 4/12 ширины строки).

Практическое применение

Для того чтобы создать колонки с контентом, адаптированным под мобильные устройства, необходимо в панели управления нажать на «Редактировать html-код блока»

Вы попадете в html-редактор инфоблока.

Чтобы разбить контент на две колонки, нужно добавить в область ввода следующее:

<div class="fr-flex-container-fluid">
  <div class="fr-flex-row">
    <div class="fr-flex-col-12 fr-flex-col-md-6"></div>
    <div class="fr-flex-col-12 fr-flex-col-md-6"></div>
  </div>
</div>

У вас должно получиться это.

Каждый из <div class="fr-flex-col-12 fr-flex-col-md-6"> представляет собой колонку, и вы можете разместить внутри него свой контент. Например, как показано на скриншоте.

В итоге вы получите 2 колонки с вашим контентом, которые на экране компьютера выглядят

А на мобильном устройстве

Чтобы разбить контент на три колонки, нужно записать следующую конструкцию:

<div class="fr-flex-container-fluid">
  <div class="fr-flex-row">
    <div class="fr-flex-col-12 fr-flex-col-md-4"></div>
    <div class="fr-flex-col-12 fr-flex-col-md-4"></div>
    <div class="fr-flex-col-12 fr-flex-col-md-4"></div>
  </div>
</div>

У вас должно получиться это.

Каждый из <div class="fr-flex-col-12 fr-flex-col-md-4"> представляет собой колонку, и вы можете разместить внутрь него свой контент. Например, как показано на скриншоте.

В итоге вы получите 3 колонки с вашим контентом, которые на экране компьютера выглядят

На мобильном устройстве будет выглядеть аналогично предыдущему примеру, три колонки превратятся в одну.

Примечания по мобильным устройствам

Чтобы контент правильно адаптировался под мобильные устройства, внутри колонок не должно быть элементов с фиксированной шириной.

Ширина должна быть равна 100% (width: 100%;), либо нужно использовать максимальную ширину - max-width: 400px;.

Пример записи содержимого колонки с ограничением по ширине:

<div class="fr-flex-container-fluid">
  <div class="fr-flex-row">
    <div class="fr-flex-col-12 fr-flex-col-md-6">
      <div style="max-width:400px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
    </div>
    <div class="fr-flex-col-12 fr-flex-col-md-6"></div>
  </div>
</div>

В примере, который приведен выше, содержимое первой колонки будет ограничено по ширине указанным значением и не превысит его, однако, при уменьшении колонки, содержимое будет также сжиматься и не выйдет за пределы колонки.