Снук опублікував статтю під назвою "Перекриття заголовка з сіткою CSS", де він розглядає шаблон дизайну заголовка, який, на мою думку, виходить за межі тенденцій і був популярним вічно. Ідея полягає в тому, що заголовок є великим, а основна область вмісту підкрадається до нього і перекриває фон заголовка. У цьому є просто щось приємне і втішне.
Я думаю про те, що робить Снук:
Історично я робив це з негативними маржами. Заголовок має висоту, яка додає купу прокладок внизу, а потім корпус отримує
margin-top: -50pxабо все, що вимагає дизайн.
Але тоді він вирішує зробити це за допомогою CSS-сітки! Цікаво. Чому? Ну ось в що ми влезем. Сітка може просто почуватися (і насправді бути) міцнішою. Сітка також може бути більш гнучкою. Наприклад, max-heightі autoполя чудово підходять для центрування, але що, якщо ви хочете нерівні жолоби по краях? Це було б важко і легко з Grid. Ітан Маркотт писав:
Замість того, щоб просто зробити дефолт
max-widthобмеженням, я можу використовувати порожній простір навколо мого дизайну і розглядати його як інструмент макетування.
Я намагаюся змінити ідею Снука в цьому відео, а потім, зрештою, порівняти її з моїм кінцевим результатом.
- Снук
- Шахта (очистила невеликий пост-відео для естетики)