Grid.css - минимальная грид-система для веб-разработчиков

Большие рамки, такие как Bootstrap, поставляются с собственные настройки сетки. Но они также прийти с большим количеством багажа в виде предварительно разработанных элементов страницы и компонентов JavaScript.

Если вы ищете гораздо меньшую и оптимизированную систему сетки, то вам понравится Grid.css.

Эта бесплатная библиотека с открытым исходным кодом поставляется в комплекте с традиционным Сетка 12 кол что вы можете структурировать для любого макета. CSS действительно прост в использовании и сам файл только 560 байт (это половина КБ!)

Начать очень легко, и вам просто нужно один файл CSS добавлено в ваш заголовок.

Вы можете найти прямая ссылка для скачивания на домашней странице Grid.css или в официальном репозитории GitHub. Вы могли бы даже использовать сырая версия CDN встроить этот файл непосредственно из GitHub, не размещая его самостоятельно.

Теперь вы можете настроить структуру столбцов используя любые элементы, которые вы хотите (разделы, разделы и т. д.).

Это обычно включает в себя .строка элемент (контейнер) наряду со многими элементы внутреннего столбца. Колонка классов использовать цифры определить их общее пространство внутри контейнера, например,, .COL4 занимает четыре столбца из двенадцати всего.

Вот пример фрагмента из демо:

Вы можете использовать любую комбинацию классов столбцов, которые вам нравятся, лишь бы они добавить до 12.

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

Естественно, эта библиотека 100% бесплатно а также Открытый исходный код, так что вы можете вносить изменения, как вам нравится.

Создатель Ахмед Тарек, также сделал Бутнс который является вариантом множества кнопок пользовательского интерфейса там. Это хорошо сочетается с Grid.css, так что они обе прекрасные библиотеки, которые можно выбрать при запуске нового веб-проекта.