Картинка - Остались вопросы?
Остались вопросы?
Напишите нам и мы поможем подобрать тариф именно для Вас!

[CSS] Система сеток

В этом модуле внедрена Система сетки от Bootstrap. Система сетки использует серию контейнеров, строк и столбцов для размещения и выравнивания содержимого. Сетки построены на flexbox и полностью отзывчивы. Ниже приведен пример с подробным объяснением того, как работает система сеток.

Пример

<div class="atumquiz-row">
	<div class="atumquiz-col">Колонка</div>
	<div class="atumquiz-col">Колонка</div>
	<div class="atumquiz-col">Колонка</div>
</div>

Параметры сетки

xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px 		xxl
≥1400px
Префикс класса .atumquiz-col- .atumquiz-col-sm- .atumquiz-col-md- .atumquiz-col-lg- .atumquiz-col-xl- .atumquiz-col-xxl-
Колонок 12
Отступы 15px (7.5px слева и справа), 15px сверху

CSS

Для изменения отступа у сетки были предусмотренный Кастомные свойства: 

.atumquiz-row{
	--atumquiz-gutter-x: 15px;
	--atumquiz-gutter-y: 15px;
}

Колонки с автоматической компоновкой

Используйте классы колонок, специфичные для контрольной точки, для удобного определения размера колонки без явного нумерованного класса, например .atumquiz-col-sm-6.

1. Равная ширина

Например, вот два макета сетки, которые применяются к каждому устройству и окну просмотра, от xs до xxl. Добавьте любое количество классов без единиц измерения для каждой нужной контрольной точки, и каждая колонка будет одинаковой ширины.

<div class="atumquiz-row">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>
<div class="atumquiz-row">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>

2. Установка ширины одного колонки

Автоматическая компоновка колонок сетки Flexbox также означает, что Вы можете установить ширину одного колонки и автоматически изменять размер колонок-братьев вокруг него. Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину. Обратите внимание, что размер других колонок будет изменяться независимо от ширины центрального колонки.

<div class="atumquiz-row">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col-6">atumquiz-col-6</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>
<div class="atumquiz-row">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col-5">atumquiz-col-5</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>

3. Переменная ширина контента

Используйте классы atumquiz-col-[ xs | sm | md | lg | xl | xxl ]-auto для определения размера колонок в зависимости от естественной ширины их содержимого.

<div class="atumquiz-row">
	<div class="atumquiz-col-lg-2">atumquiz-col-lg-2</div>
	<div class="atumquiz-col-md-auto">Переменная ширина контента</div>
	<div class="atumquiz-col-lg-2">atumquiz-col-lg-2</div>
</div>
<div class="atumquiz-row">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col-md-auto">Переменная ширина контента</div>
	<div class="atumquiz-col-lg-2">atumquiz-col-lg-2</div>
</div>

Адаптивные классы

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

1. Все контрольные точки

Для сеток, одинаковых от самых маленьких до самых крупных, используйте классы .atumquiz-col и .atumquiz-col-*. Укажите нумерованный класс, если Вам нужна колонка определенного размера; в противном случае не стесняйтесь использовать .atumquiz-col.

<div class="atumquiz-row">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>
<div class="atumquiz-row">
	<div class="atumquiz-col-8">atumquiz-col-8</div>
	<div class="atumquiz-col-4">atumquiz-col-4</div>
</div>

2. Сложение по горизонтали

Используя один набор классов .col-sm-*, Вы можете создать базовую систему сеток, которая начинается с накопления и становится горизонтальной в малой контрольной точке (sm).

<div class="atumquiz-row">
	<div class="atumquiz-col-sm-8">atumquiz-col-sm-8</div>
	<div class="atumquiz-col-sm-4">atumquiz-col-sm-4</div>
</div>
<div class="atumquiz-row">
	<div class="atumquiz-col-sm">atumquiz-col-sm</div>
	<div class="atumquiz-col-sm">atumquiz-col-sm</div>
	<div class="atumquiz-col-sm">atumquiz-col-sm</div>
</div>

3. Смешение и сочетание

Не хотите, чтобы Ваши колонки просто складывались в несколько ярусов сетки? При необходимости используйте комбинацию разных классов для каждого уровня. См. пример ниже, чтобы лучше понять, как все это работает.

<div class="atumquiz-row">
	<div class="atumquiz-col-md-8">atumquiz-col-md-8</div>
	<div class="atumquiz-col-6 atumquiz-col-md-4">atumquiz-col-6 atumquiz-col-md-4</div>
</div>
<div class="atumquiz-row">
	<div class="atumquiz-col-6 atumquiz-col-md-4">atumquiz-col-6 atumquiz-col-md-4</div>
	<div class="atumquiz-col-6 atumquiz-col-md-4">atumquiz-col-6 atumquiz-col-md-4</div>
	<div class="atumquiz-col-6 atumquiz-col-md-4">atumquiz-col-6 atumquiz-col-md-4</div>
</div>
<div class="atumquiz-row">
	<div class="atumquiz-col-6">atumquiz-col-6</div>
	<div class="atumquiz-col-6">atumquiz-col-6</div>
</div>

4. Ряд колонок

Используйте адаптивные классы .atumquiz-row-cols-*, чтобы быстро установить количество столбцов, которые лучше всего отображают ваш контент и макет. В то время как обычные классы .atumquiz-col-* применяются к отдельным столбцам (например, .atumquiz-col-md-4), классы столбцов строк устанавливаются в родительском .atumquiz-row в качестве ярлыка. С помощью .atumquiz-row-cols-auto вы можете придать столбцам их естественную ширину.

Используйте эти классы столбцов строк для быстрого создания базовых макетов сетки или для управления макетами карточек.

<div class="atumquiz-row atumquiz-row-cols-2">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>
<div class="atumquiz-row atumquiz-row-cols-3">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>
<div class="atumquiz-row atumquiz-row-cols-auto">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>
<div class="atumquiz-row atumquiz-row-cols-4">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>
<div class="atumquiz-row atumquiz-row-cols-1 atumquiz-row-cols-sm-2 atumquiz-row-cols-md-4">
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
	<div class="atumquiz-col">atumquiz-col</div>
</div>

Вложенность

Чтобы вложить содержимое в сетку по умолчанию, добавьте новую колонку .atumquiz-row и набор колонок .atumquiz-col-sm-* в существующую колонку .atumquiz-col-sm-*. Вложенные строки должны включать набор колонок, которые в сумме составляют до 12 или меньше (не обязательно использовать все 12 доступных колонок).

<div class="atumquiz-row">
	<div class="atumquiz-col-sm-3">Уровень 1</div>
	<div class="atumquiz-col-sm-9">
		<div class="atumquiz-row">
			<div class="atumquiz-col-8 atumquiz-col-sm-6">Уровень 2</div>
			<div class="atumquiz-col-4 atumquiz-col-sm-6">Уровень 2</div>
		</div>
	</div>
</div>