Основа сетки системы масштабируется до 12 столбцов на странице. Грид-системы используются для создания макетов страниц через ряд строк и столбцов, в которых размещается ваш контент.
Параметры сетки
В следующей таблице кратко рассказывается о том, как работает сеточная система Foundation на нескольких устройствах.
| Телефоны небольших устройств (<640px) | Таблетки средних устройств (> = 640px) | Большие устройства Ноутбуки и десктопы (> = 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
Сначала создайте класс строки для создания горизонтальных групп столбцов.
Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными потомками строк.
Столбцы сетки создаются путем указания числа двенадцати доступных столбцов, которые вы хотите охватить. Например, для четырех равных столбцов мы будем использовать .large-3
Ниже приведены три класса, используемые в системе сетки фундамента.
| Sr.No. | Основные классы сетки и описание |
|---|---|
| 1 | большой
Классы Large- * используются для больших устройств. |
| 2 | Средняя
Средний класс * используется для средних устройств. |
| 3 | Маленький
small- * класс используется для небольших устройств. |
Классы Large- * используются для больших устройств.
Средний класс * используется для средних устройств.
small- * класс используется для небольших устройств.
Advanced Grid
Ниже приведены расширенные форматы сетки, используемые в Foundation.
| Sr.No. | Расширенные сетки и описание |
|---|---|
| 1 | Комбинированная колонка / строка
Классы столбца и строки используются в одном элементе, чтобы получить столбец полной ширины для использования в качестве контейнера. |
| 2 | гнездование
Мы можем вкладывать столбцы сетки в другие столбцы. |
| 3 | Смещения
Используя класс large-offset- * или small-offset- * , вы можете перемещать столбцы вправо. |
| 4 | Неполные строки
Основание автоматически перемещает последний элемент вправо, если строки не содержат столбцы до 12. |
| 5 | Свернуть / Развернуть Строки
Используя размер медиазапроса, классы collapse и uncollapse включаются в элемент строки для отображения отступов. |
| 6 | Центрированные столбцы
Включив класс в центре столбца, вы можете сделать столбец в центре. |
| 7 | Источник заказа
Исходный класс упорядочения используется для перемещения столбцов между точками останова. |
| 8 | Блок сетки
Блок-сетка используется для разделения контента. |
Классы столбца и строки используются в одном элементе, чтобы получить столбец полной ширины для использования в качестве контейнера.
Мы можем вкладывать столбцы сетки в другие столбцы.
Используя класс large-offset- * или small-offset- * , вы можете перемещать столбцы вправо.
Основание автоматически перемещает последний элемент вправо, если строки не содержат столбцы до 12.
Используя размер медиазапроса, классы collapse и uncollapse включаются в элемент строки для отображения отступов.
Включив класс в центре столбца, вы можете сделать столбец в центре.
Исходный класс упорядочения используется для перемещения столбцов между точками останова.
Блок-сетка используется для разделения контента.
Строительство Семантически
Используя набор миксинов SASS, генерируется сетка CSS, которая используется для построения вашей собственной семантической сетки. Для получения дополнительной информации нажмите здесь
SASS Ссылка
Ниже приведены ссылки SASS для сетки, используемой в фундаменте.
Используя переменные sass, мы можем изменить стили этого компонента по умолчанию.
Окончательный вывод CSS строится с использованием миксина.