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

Ниже мы собрали несколько распространенных примеров сеток.

Три равные колонки

Этот пример демонстрирует, как создать три равные колонки (33.3%/33.3%/33.3%), которые отображаются как три колонки на средних и больших устройствах и автоматически складываются в один столбец на маленьких устройствах:

Три неравные колонки

Этот пример демонстрирует, как создать три неравные колонки (25%/50%/25%), которые отображаются как три колонки на средних и больших устройствах и автоматически складываются в один столбец на маленьких устройствах:

Две равные колонки

Этот пример демонстрирует, как создать две равные колонки (50%/50%), где соотношение колонок всегда 50%/50% на маленьких, средних и больших устройствах:

Две неравные колонки

Этот пример демонстрирует, как создать две неравные колонки (33.3%/66.6%), где соотношение колонок всегда 33.3%/66.6% на маленьких, средних и больших устройствах:

Изменение порядка столбцов

используя.small|medium|large-push-*и.small|medium|large-pull-*Классы для изменения порядка столбцов:

Вложенные столбцы

Вы можете использовать вложенные сетки (столбцы внутри столбцов):

Смешанный: мобильные и настольные устройства

Система сеток Foundation имеет три колонки:.small-*(телефон),.medium-*(Планшет), и.large-*(настольные устройства). Эти классы можно динамически комбинировать, чтобы сделать макет более гибким:

Совет:Каждый класс можно масштабировать вверх. Если вы хотите, чтобы ширина была одинаковой на устройствах с маленьким и большим экраном, можно задать указанный.small-*。

Смешанные: мобильные, планшетные и настольные устройства

Центрированные колонки

Центрирование колонок можно использовать.small-centeredкласс. Средние и большие устройства могут наследовать центрирование от малых устройств, но вам нужно задать класс центрирования на больших устройствах..large-centered 。

Смещение колонки

Вы можете использовать.large-offset-*(или.small-offset-*) класс перемещает колонку вправо. Количество колонок для левого отступа управляется знаком *:

Неполные колонки

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

Optional.endКласс используется, чтобы сдвинуть элемент в последней колонке влево:

Широкоэкранный

Сетка (.row) Максимальный размер (max-width) составляет 62.5rem. На широкоэкранных устройствах размер может быть больше 62.5rem, поэтому колонки не могут полностью заполнить страницу, даже если ширина установлена на 100%. Но мы можем задать новый max-width через CSS:

Если вы хотите использовать max-width по умолчанию, но цвет фона должен охватывать всю страницу, то применяйте его к элементу-контейнеру.rowКлассы, а также укажите нужный вам цвет фона: