Tyler Sticka teilte eine raffinierte Technik, um Inhalte in einem CSS Grid Layout "auszubrechen", aber Rachel Andrew geht noch einen Schritt weiter, um zu erklären, warum die Technik funktioniert.
Wenn Sie Zeilen benennen, können Sie sie optional als *-start und *-end benennen. Dies verleiht Ihnen ein wenig mehr Grid-Magie. Wir erhalten einen benannten Grid-Bereich mit dem Hauptnamen. Klingt seltsam? Schauen Sie sich das folgende Diagramm an. Es zeigt 4 benannte Grid-Linien, main-start und main-end sowohl für Spalten als auch für Zeilen. Der durch die Schnittpunkte dieser Linien definierte Bereich kann nun mit dem Namen main referenziert werden. Wenn wir die Linien foo-start und foo-end benannt hätten, hätten wir einen benannten Bereich namens foo.
Rachels Beitrag fiel mir aus mehreren Gründen auf. Erstens liebe ich Blogbeiträge als Antworten auf andere Blogbeiträge. Zweitens ist es eine ausgezeichnete Erinnerung daran, dass das Teilen, **wie** ein Konzept funktioniert, genauso wichtig ist wie das Zeigen, dass es funktioniert. Drittens ist das Konzept der implizit benannten Grid-Bereiche, die auf benannten Grid-Linien basieren, ein guter Grund, die Ärmel hochzukrempeln und sich mit der Spezifikation vertraut zu machen. Tatsächlich ist Rachels Reihe zur CSS Grid-Spezifikation ein guter Ausgangspunkt.
Nebenbei bemerkt hat mich Tylers clevere Nutzung benannter Grid-Linien an Dave Ruperts ebenso kunstvolle Verwendung von :not erinnert, um einen ähnlichen Full-Bleed-Effekt zu erzielen.