Замінюємо Bootstrap розмітку на CSS Grid

4 хв. читання

У березні Mozilla випустила Firefox 52, куди додала підтримку CSS сітки. Якщо ви не знайомі з CSS Grid, – це двовимірна система розмітки для вебу, яка дозволяє створювати нативні шаблони розмітки для браузера. Це означає, що ми можемо створювати знайомі нам сітки, написавши всього лише декілька рядків коду CSS. Також це означає, що ми можемо робити набагато більше за допомогою CSS, ніж могли раніше... Але все по порядку.

Примітка: стаття не позиціонується як комплексний навчальний матеріал. Якщо ви ще не знайомі з сіткою, рекомендуємо прочитати наше керівництво по CSS Grid.

Шаблони в мережі завжди були заплутаними. Коли веб тільки-но зародився, не було жодного метода створювати розмітку. Потім з'явились таблиці (в таблицях в таблицях). Код виглядав жахливо, але воно працювало. В пізніх дев'яностих представили CSS, розробники отримали div і float для дизайну та розмітки шаблонів. З'явилися фреймворки і систем сіток, що полегшували роботу з усілякими підводними камнями, типу очистки float, негативних границь, адаптивного дизайну тощо. Ось як все це виглядає у наш час: є тисячі систем сіток, але всі вони більш-менш схожі між собою.

Тепер CSS сітка – реальність. І я б хотів подивитись, що трапиться, якщо замінити відомий фреймворк звичайною сіткою на CSS. Для цього експерименту я обрав популярний Bootstrap.

Я почав із створення базового сайту на Bootstrap: Сайт

Самий час все це зламати і замінити на CSS Grid.

В Bootstrap, клас .container обгортає все і визначає обмеження ширини. Він також додає padding на ліві та праві краї і все відцентровує. Тут особливо нічого змінювати. Так само, як з Bootstrap, клас .container можна використати з CSS сіткою. Я переробив його ось так:

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

Додамо граничні значення для адаптивного дизайну:

@media (min-width: 992px) {
    .container {
        width: 970px;
     }
}

Bootstrap використовує клас .row, щоб обгорнути колонки та забезпечити негативний margin ліворуч та праворуч для нівелювання відступів окремих стовпчиків. Хаки з негативними границями не потрібні, але якщо ви читали документацію, то знаєте, що CSS Grid вимагає контейнер сітки. Клас .row ідеально підходить для цього. Подивіться, що я зробив, а після цього ми будемо доламувати наш код:

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

display: grid показує, що ми будемо робити сітку.

Опція grid-template-columns позначає колонки для сітки. Можна використовувати пропуски для кожної колонки індивідуально, але тут ми скорочуємо код, створюючи 12 однакових стовпчиків. 1fr позначає ширину кожного з них. MDN пояснює одиницю fr як нову одиницю, яка «відображає доступну частину місця у контейнері сітки». Більш детально можна почитати тут. А також про опцію grid-template-columns тут.

grid-gap – скорочена опція, яка керує вільним місцем між колонками та рядками колонок. Більше про grid-gap.

Все, що лишилось – класи колонок. Bootstrap використовує класи для колонок, що виглядають приблизно так .col-md-6 чи .col-lg-8. Це допомагає вирахувати кількість колонок і орієнтуватися в них. Створити класи по своєму шаблону просто, завдяки міні-опції grid-column. Наприклад, для .col-md-6 ми використовуємо наступне:

@media (min-width: 992px) {
    .col-md-6 {
        grid-column: span 6;
    }
}

Легко, правда? Ніяких float. Ніякого padding. Воно просто працює. Опція grid-column визначає розмір і розташування якоїсь частинки. Можна використовувати span, щоб вказати цій певній частинці, що вона має перестрибнути, наприклад, шість колонок. Ця «виїмка» автоматично опрацьовується опцією grid-gap. Більше про grid-column.

Тож, що трапляється якщо все підсумувати? Сайт залишається таким самим на вигляд, але ми змогли повністю прибрати Bootstrap .

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.8K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація