Створити сучасні макети легко за допомогою Gridlex CSS Grid System
Фронтенд розвитку радикально поліпшився з введенням CSS flexbox. Це значно полегшує створювати сітки та стовпці що природно зміщується для реагування макетів.
Замість кодування власної сітки flexbox з нуля, набагато простіше використовувати такий інструмент, як Gridlex. Ця безкоштовна бібліотека з відкритим вихідним кодом є надлегкий і дуже легко налаштувати.
Все, що ви робите, це додайте таблицю стилів Gridlex на веб-сторінці та працювати з його сітковими класами. Внутрішні стовпці беруть клас .col і ви обертаєте все це всередину .сітки контейнер. Це визначає кожен стовпець на тій же ширині і створює єдиний інтерфейс.
Це за замовчуванням може бути перевизначено шляхом додавання класифікація розмірів до кожної колонки. Таким чином можна мати один стовпець шириною 70%, а інший стовпець шириною 30% (наприклад, вміст / бічну панель).
Ви знайдете тонни зразки сітки на домашній сторінці Gridlex живі демонстрації і фрагменти коду копіювати / вставляти на свій сайт. Це величезна бібліотека з такою кількістю необов'язкові класи щоб допомогти вам створити найпростіші сітки для будь-якого веб-сайту.
Усі сітки складаються з a всього 12 міні-колонок, таким чином, ви можете визначити, скільки простору кожен стовпчик має займати. Це може здатися заплутаним, але має сенс, коли ви бачите візуальні демонстрації.
Ось a приклад коду використовується для більшої сітки з різною шириною:
………
Зверніть увагу, що .сітки class містить все і стовпці намагаються розділити на 12 частин (у прикладі це буде ⅓ ширина для кожного). Однак закріплені стовпці span 2 і 6 cols відповідно, так само перша колонка використовує автоматичну ширину на підставі того, що залишилося.
Використовуючи два інших стовпці, можна зробити висновок, що залишиться 4 колонки (12-6-2) всього 12. Це дуже проста математика, але імена класів можуть заплутати. Як тільки ви почнете грати з Gridlex в проекті, ви швидко знайдете систему імен.
Gridlex в даний час у версії 2.x і це постійно оновлюється на GitHub. Оскільки підтримка веб-переглядача зростає, я б гарантовав більше уваги до flexbox, оскільки більше сайтів приймають цю модель для сітки сторінок.
Ви навіть можете знайти повна галерея веб-сайтів, на яких запущено Gridlex, щоб побачити, як це виглядає при застосуванні до веб-сайтів, що живуть.
Якщо ви ніколи раніше не використовували flexbox, то Gridlex може бути цікавою бібліотекою для гри. Але я також рекомендую практикувати спочатку за допомогою ігор для розваг, щоб перевірити свої знання і допомогти вам зрозуміти основи.
Gridlex є безкоштовно у репозиторії GitHub або ви можете витягти його через npm або bower. Він пропонує повна документація на основному сайті, включаючи демонстрації для стовпців різної ширини та медіа-запитів.
Ти маєш повний контроль над дизайном flexbox і це тільки займає кілька CSS класів щоб це сталося! І якщо ви коли-небудь маєте швидке питання або хочете поділитися сайтом, який ви побудували за допомогою Gridlex, ви можете повідомити творця на Twitter @webdevlint.
