Простое создание современных макетов с помощью Gridlex CSS Grid System
Развитие интерфейса улучшилось радикально с введением CSS flexbox. Это значительно облегчает создавать сетки и столбцы что естественно смещается для адаптивных макетов.
Вместо того, чтобы кодировать свою собственную сетку flexbox с нуля, гораздо проще использовать такой инструмент, как Gridlex. Эта бесплатная библиотека flexbox с открытым исходным кодом супер-легкий и очень легко настроить.
Все, что вы делаете, это добавить таблицу стилей Gridlex на вашу веб-страницу и работать со своими классами сетки. Внутренние столбцы принимают класс .седло и вы заверните все это внутри .сетка контейнер. Это определяет каждый столбец на той же ширине и создает единый интерфейс.
Это по умолчанию может быть отменено добавляя классы калибровки к каждому столбцу. Таким образом, вы можете иметь один столбец с шириной 70% и другой столбец с шириной 30% (например, контент / боковая панель).
Вы найдете тонны образцы сетки на домашней странице Gridlex с живые демо а также фрагменты кода скопировать / вставить на ваш сайт. Это огромная библиотека с таким количеством дополнительные классы чтобы помочь вам построить простейшие сетки для любого сайта.
Все сетки складываются в всего 12 мини-колонок, так что вы можете определить, сколько места должен занимать каждый столбец. Это может показаться запутанным, но это имеет смысл, когда вы видите визуальные демонстрации.
Вот пример кода используется для большей сетки с различной шириной:
.........
Обратите внимание, что .сетка класс содержит все, и столбцы пытаются разделить на 12 частей (в примере это будет ⅓ ширина для каждого). Тем не менее, фиксированные столбцы охват 2 и 6 столбцов соответственно самый первый столбец использует автоматическую ширину основываясь на том, что осталось.
Используя два других столбца, мы можем сделать вывод, что осталось бы 4 столбца (12-6-2) для в общей сложности 12. Это все очень простая математика, но имена классов могут сбивать с толку. Когда вы начнете играть с Gridlex в проекте, вы быстро освоите систему имен.
Гридлекс сейчас в версии 2.x И его постоянно обновляется на GitHub. По мере роста поддержки браузеров, я гарантирую больше внимания Flexbox, так как все больше сайтов используют эту модель для сеток страниц..
Вы даже можете найти полная галерея сайтов, работающих под управлением Gridlex, чтобы увидеть, как это выглядит применительно к живым сайтам.
Если вы никогда не использовали flexbox, Gridlex может стать забавной библиотекой для игры. Но я также рекомендую сначала попрактиковаться в использовании забавных игр flexbox, чтобы проверить свои знания и помочь понять основы.
Гридлекс это доступно бесплатно в репозитории GitHub или вы можете получить его через Npm или Bower. Это предлагает полная документация на главном сайте, включая демонстрации для столбцов различной ширины и медиа-запросов.
У тебя есть полный контроль над дизайном flexbox и только занимает несколько классов CSS чтобы это произошло! И если у вас возникнут вопросы или вы захотите поделиться сайтом, который вы создали с помощью Gridlex, вы можете отправить сообщение создателю в Твиттере @webdevlint.
