Простое создание современных макетов с помощью Gridlex CSS Grid System

Разработка внешнего интерфейса радикально улучшилась с введением CSS flexbox. Это значительно упрощает создание сеток и столбцов, которые естественным образом смещаются для адаптивных макетов.

Вместо того, чтобы кодировать свою собственную сетку flexbox с нуля, гораздо проще использовать такой инструмент, как Gridlex, Эта бесплатная библиотека flexbox с открытым исходным кодом является сверхлегкой и очень простой в настройке.
Все, что вам нужно сделать, это добавить таблицу стилей Gridlex на свою веб-страницу и работать с ее классами сетки. Внутренние столбцы принимают класс .col, и вы помещаете все это в контейнер .grid. Это определяет каждый столбец с одинаковой шириной и создает единый интерфейс.

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

Читайте также: Дизайн пользовательского интерфейса: введение в гибкую коробку

Вы найдете тонны образцов сетки на Домашняя страница Gridlex с живыми демонстрациями и фрагментами кода для копирования / вставки на ваш сайт. Это огромная библиотека с таким количеством необязательных классов, которые помогут вам создать простейшие сетки для любого веб-сайта.

Всего сеток в общей сложности 12 мини-столбцов, так что вы можете определить, сколько места должен занимать каждый столбец. Это может показаться запутанным, но это имеет смысл, когда вы видите визуальные демонстрации.

Вот пример кода, используемый для большей сетки с различной шириной:

Обратите внимание, что класс .grid содержит все, и столбцы пытаются разделить на 12 частей (в примере это будет ⅓ width для каждой). Тем не менее, фиксированные столбцы охватывают 2 и 6 столбцов соответственно, поэтому в самом первом столбце используется автоматическая ширина в зависимости от того, что осталось.

Используя два других столбца, мы можем сделать вывод, что осталось всего 4 столбца (12-6-2), чтобы их общее число составило 12. Это очень простая математика, но имена классов могут сбивать с толку. Когда вы начнете играть с Gridlex в проекте, вы быстро освоите систему имен.

В настоящее время Gridlex находится в версии 2.x и постоянно обновляется. на GitHub, По мере роста поддержки браузеров я гарантирую больше внимания флексбоксу, поскольку все больше сайтов используют эту модель для сеток страниц.

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

Gridlex доступен бесплатно в GitHub репо или вы можете тянуть его через нпм или бауэр. Он предлагает полную документацию по главный сайт, включая демонстрации для столбцов различной ширины и медиа-запросов.

У вас есть полный контроль над дизайном flexbox, и для этого нужно всего несколько классов CSS! И если у вас возникнут вопросы или вы захотите поделиться сайтом, который вы создали с помощью Gridlex, вы можете отправить сообщение создателю в Twitter. @webdevlint,

Рекомендуемое чтение: шаблоны Flexbox: библиотека CSS для Flexbox

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>