Снук опубликовал статью под названием «Перекрытие заголовка с сеткой CSS», в которой он рассматривает шаблон дизайна заголовка, который, как мне кажется, выходит за рамки тенденций и всегда был популярным. Идея состоит в том, что размер заголовка слишком большой, и основная область содержимого проникает в него и перекрывает фон заголовка. В этом есть что-то приятное и утешительное.
Я вспоминаю то же самое, что и Snook's:
Исторически сложилось так, что я делал это с отрицательной маржой. У заголовка есть высота, которая добавляет кучу отступов внизу, а затем тело получает
margin-top: -50pxили что-то вроде того, что требует дизайн.
Но затем он решает сделать это с помощью сетки CSS! Интересно. Почему? Ну вот во что мы войдем. Grid может просто казаться (и на самом деле быть) более прочным. Сетка также может быть более гибкой. Например, max-heightи autoполя велики в центрирования, но что , если вы хотите неровные желобов по краям? Там это было бы сложно, а с Grid - легко. Итан Маркотт писал:
Вместо того, чтобы просто использовать по умолчанию
max-widthкак ограничение, я могу использовать пустое пространство вокруг моего дизайна и рассматривать его как инструмент макета.
В этом видео я пытаюсь реконструировать идею Снука, а затем сравнить ее с моим окончательным результатом.
- Snook's
- Мой (убрал немного пост-видео для эстетики)