Фундамент - Сетка

Описание

Сетка Foundation масштабирует до 12 столбцов на странице. Системы сетки используются для создания макетов страниц через ряд строк и столбцов, в которых размещается ваш контент.

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

В следующей таблице кратко рассказывается о том, как сетка Foundation работает на нескольких устройствах.

	Маленькие устройства Телефоны (<640 пикселей)	Средние устройства Планшеты (> = 640 пикселей)	Большие устройства Ноутбуки и настольные компьютеры (> = 1200 пикселей)
Поведение сетки	Горизонтально всегда	Свернут, чтобы начать, горизонтально над точками останова	Свернут, чтобы начать, горизонтально над точками останова
Префикс класса	.небольшой-*	.Средняя-*	.large- *
Число столбцов	12	12	12
Гнездовой	да	да	да
Смещения	да	да	да
Порядок столбцов	да	да	да

Базовая структура сетки фундамента

Ниже приводится базовая структура сетки фундамента -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

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

• Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.

• Столбцы сетки создаются путем указания количества из двенадцати доступных столбцов, которые вы хотите охватить. Например, для четырех одинаковых столбцов мы будем использовать .large-3.

Ниже приведены три класса, используемые в системе сетки Foundation:

Sr. No.	Основные классы сетки и описание
1	Большой В крупно- * классы используются для больших устройств.
2	Средняя Класс medium- * используется для устройств среднего размера.
3	Маленький small- * класс используется для небольших устройств.

Расширенная сетка

Ниже приведены расширенные форматы сетки, используемые в Foundation.

Sr. No.	Расширенные сетки и описание
1	Комбинированный столбец / ряд В столбцах и строки классов используются на тот же элемент , чтобы получить полный столбец ширины , чтобы использовать в качестве контейнера.
2	Гнездование Мы можем вкладывать столбцы сетки в другие столбцы.
3	Смещения Используя класс large-offset- * или small-offset- * , вы можете переместить столбцы вправо.
4	Неполные строки Foundation автоматически перемещает последний элемент вправо, если строки не включают столбцы до 12.
5	Свернуть / развернуть строки Используя размер медиа-запроса, классы свертывания и разворачивания включаются в элемент строки для отображения отступов.
6	Центрированные колонны Включив в столбец класс small- center, вы можете сделать столбец в центре.
7	Заказ источников Исходный класс упорядочивания используется для перемещения столбцов между точками останова.
8	Блочные сетки Блок-сетка используется для разделения содержимого.

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

Используя набор миксинов SASS, создается CSS-таблица, которая используется для построения вашей собственной семантической сетки. Для получения дополнительной информации нажмите здесь

Ссылка на SASS

Ниже приведены ссылки на SASS для сетки, используемой в Foundation.

Sr. No.	Основные сетки и описание
1	Переменные Используя переменные sass, мы можем изменить стили по умолчанию для этого компонента.
2	Миксины Окончательный вывод CSS создается с помощью миксина.