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

Великі рамки фронтендів, такі як Bootstrap, поставляються разом з ними власні налаштування сітки. Але, вони також приходять з великою кількістю багажу у вигляді попередньо розроблених елементів сторінки та компонентів JavaScript.

Якщо ви шукаєте набагато меншу і раціоналізовану систему сітки, то вам сподобається Grid.css.

Ця безкоштовна бібліотека з відкритим кодом постачається в комплекті з традиційною 12-col grid grid що ви можете структурувати для будь-якого макета. CSS дуже простий у використанні і сам файл вимірює лише 560 байт (це половина КБ!)

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

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

Тепер ви можете налаштувати структуру стовпців використовуючи потрібні елементи (div, розділ тощо).

Це зазвичай включає в себе a .рядок елемент (контейнер) разом з багатьма елементи внутрішніх стовпців. Класи стовпців використовувати номери щоб визначити їх загальний простір всередині контейнера, наприклад, наприклад, .col4 займає чотири колонки з дванадцяти загальних.

Ось такий приклад фрагменту з демо:

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

Це означає, що ви також можете реструктуризуйте сторінку як завгодно, використовуючи різні контейнери рядка. Наприклад, ви можете мати один великий проміжок для заголовка, але використовувати два різних налаштування рядка / кольору для тіла сторінки.

Природно, ця бібліотека є 100% безкоштовно і відкрите джерело, тому ви можете редагувати, як вам подобається.

Творець, Ахмед Тарек, також зробив Butns який є варіантом багатьох наборів інтерфейсів з кнопками. Це пар красиво з Grid.css, тому вони обидві відмінні бібліотеки, щоб підібрати при запуску нового веб-проекту.