Просте використання CSS Grid

31

Від автора: можливо, ви чули про CSS Grid, так давайте спробуємо його. Може бути, ви не знали, з чого почати. Як вчити CSS Grid? Rachel зробила чудову серію демонстрацій по Grid. Як тільки ви вивчите основи, вам буде складно зрозуміти, де використовувати сітки. Днями я грався з сітками і натрапив на досить простий приклад

Наприклад, вам потрібно створити дві колонки. Я створював базовий двухколоночный макет для резюме на моєму сайті. Макет був приблизно таким:

Простое использование CSS Grid

Досить просто, так адже? Основна колонка і сайдбар. До сьогоднішнього дня для створення подібного макета ми використовували хакі Float і навіть Flexbox. Забавно, що навіть Flexbox не до кінця підходить під такий макет. Ідеальне рішення – Grid. З Flexbox вам довелося б писати приблизно наступний код:

Your content here.
Your sidebar content here.

CSS був би приблизно таким:

.wrapper {
display: flex;
}
.main-column {
width: 70%;
/* Обійдемо box-model і використовуємо padding */
padding-right: 2rem;
}
.sidebar {
width: 30%;
}

Це тільки скелет. Метод вище вимагає 10 рядків коду для базового макета. Тепер давайте зробимо це на Grid з трьома рядками.

.wrapper {
display: grid;
grid-template-columns: 70% 30%;
grid-gap: 2rem;
}

І все. Grid злегка лякає, але його простота і універсальність зроблять його чудовим інструментом. Поки що Grid підтримується тільки через прапори в браузерах, давайте напишемо фолбэк.

/* Якщо браузер підтримує Grid, використовується код нижче */
@supports (display: grid) {
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
grid-gap: 2rem;
}
}
/* Якщо браузер не підтримує Grid, використовується код нижче */
@supports not (display: grid) {
.wrapper {
display: flex;
}
.main-column {
width: 70%;
padding-right: 2rem;
}
.sidebar {
width: 30%;
}
}