Фонд сетки Примеры

Ниже мы собрали некоторые примеры общей сетки.

Три равных столбцов

Этот пример демонстрирует, как создать три равные колонки (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-* - .small|medium|large-pull-* класс , чтобы изменить порядок столбцов:

Уплотненный Колонка

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

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

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

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

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

Средняя колонка

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

Колонка смещение

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

Неполное колонка

Если номер столбца строки, а не 12, Фонд автоматически будет последним на правый поплавок, и пробел, чтобы заполнить в остальных столбцах.

Options .end элемент категории за один последний в левое положение поплавка:

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

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

Если вы хотите использовать максимальную ширину по умолчанию, но цвет фона среди всей страницы, то вы используете на элемента контейнера .row класса, и вам необходимо указать цвет фона: