Snook opublikował artykuł zatytułowany „Overlapping Header with CSS Grid”, w którym przygląda się wzorcowi projektu nagłówka, który, moim zdaniem, wykracza poza trendy i jest popularny od zawsze. Chodzi o to, że nagłówek jest zbyt duży, a główny obszar zawartości zakrada się do niego i zachodzi na tło nagłówka. Jest w tym coś miłego i pocieszającego.
Mój umysł kieruje się w to samo miejsce co Snook:
Historycznie robiłem to z ujemnymi marżami. Nagłówek ma wysokość, która dodaje kilka wypełnień na dole, a następnie treść otrzymuje
margin-top: -50pxlub cokolwiek innego, czego wymaga projekt.
Ale zamiast tego decyduje się zrobić to z siatką CSS! Ciekawy. Dlaczego? Cóż, w to wejdziemy. Siatka może po prostu wydawać się (i faktycznie być) mocniejsza. Siatka może być również bardziej elastyczna. Na przykład, max-heighta automarże są świetne w centrowania, ale co jeśli chcesz nierównych rynny na krawędziach? To byłoby trudne i łatwe z Grid. Ethan Marcotte napisał:
Zamiast po prostu domyślnego
max-widthograniczania, mogę wykorzystać puste miejsce wokół mojego projektu i traktować go jako narzędzie układu.
W tym filmie staram się odtworzyć pomysł Snooka, a następnie ostatecznie porównać go z końcowym wynikiem.
- Snook's
- Mój (wyczyściłem mały post-wideo ze względu na estetykę)