Einige CSS Grid-Strategien zum Abgleichen von Design Mockups

In der Welt der Webentwicklung gab es schon immer eine Lücke zwischen dem Design- und Entwicklungsübergang. Ambitionierte Designer wünschen sich, dass das Endergebnis ihrer Arbeit einzigartig und schön aussieht (und ihrer ursprünglichen Vision entspricht), während viele Entwickler mehr Wert auf ein Ergebnis legen, das konsistent, zuverlässig und robust ist (und einfach zu codieren). Diese Dynamik kann zu anhaltenden Spannungen zwischen den beiden Seiten führen, wobei beide Parteien versuchen, die Dinge in ihre eigene Richtung zu lenken.

Auch wenn diese Situation bis zu einem gewissen Grad unvermeidlich ist, kann neue Frontend-Technologie eine Rolle dabei spielen, die beiden Seiten näher zusammenzubringen. Eine solche Technologie ist CSS Grid. Dieser Beitrag untersucht, wie es verwendet werden kann, um CSS-Stile zu schreiben, die Layouts mit hoher Wiedergabetreue an das Design anpassen (ohne Kopfzerbrechen!).

Eine gängige Methode, wie Designer Anweisungen an Frontend-Entwickler weitergeben, sind Design-Mockups (mit Mockups meinen wir Ergebnisse, die in Sketch, XD, Illustrator, Photoshop usw. erstellt wurden). Alle Designer arbeiten bis zu einem gewissen Grad unterschiedlich (ebenso wie Entwickler), aber viele basieren die Struktur ihrer Layouts gerne auf einer Art Grid-System. Ein konsistentes Grid-System ist von unschätzbarem Wert, um zu kommunizieren, wie eine Webseite codiert werden soll und wie sie reagieren soll, wenn sich die Größe des Bildschirms des Benutzers vom Mockup unterscheidet. Als Entwickler schätze ich Designer sehr, die sich die Mühe machen, ein gut durchdachtes Grid-System zu übernehmen.

Ein 12-Spalten-Layout ist besonders beliebt, aber auch andere Muster sind üblich. Software wie Sketch und XD macht es ziemlich einfach, Seiten zu erstellen, die einem voreingestellten Spaltenlayout folgen – Sie können eine Überlagerung mit einem Klick ein- und ausblenden.

Sobald ein Grid-System implementiert ist, sollten die meisten Designelemente darin platziert werden. Dieser Ansatz stellt sicher, dass Formen gleichmäßig ausgerichtet sind und sorgt für ein ansprechenderes Erscheinungsbild. Zusätzlich zur visuellen Attraktivität gibt ein vorhersehbares Grid den Entwicklern ein klares Ziel vor, das sie beim Schreiben von Stilen anstreben können.

Leider kann dieses grundlegende Muster trügerisch schwierig genau zu codieren sein. Frameworks wie Bootstrap werden oft zum Erstellen von Grid-Layouts verwendet, bringen aber Nachteile wie zusätzliches Seiten-Gewicht und mangelnde Feinsteuerung mit sich. CSS Grid bietet eine bessere Lösung für den Frontend-Perfektionisten. Schauen wir uns ein Beispiel an.

Das obige Design ist eine gute Anwendung für Grid. Es gibt ein 14-Spalten-Muster mit mehreren darin platzierten Elementen. Obwohl die Boxen alle unterschiedliche Breiten und Abstände haben, halten sie sich alle an dasselbe Grid. Dieses Layout kann mit Flexbox – und sogar Floats – erstellt werden, aber das würde wahrscheinlich sehr spezifische Berechnungen erfordern, um ein pixelgenaues Ergebnis über alle Breakpoints hinweg zu erzielen. Und seien wir ehrlich: Viele Frontend-Entwickler haben nicht die Geduld dafür. Lassen Sie uns drei CSS Grid-Layout-Strategien betrachten, um diese Art von Arbeit einfacher zu erledigen.

Strategie 1: Ein Basis-Grid

Siehe den Stift
Basic Grid Placement von chris geel (@RadDog25)
auf CodePen.

Der intuitivste Weg, ein gleichmäßig verteiltes 12-Spalten-Layout zu schreiben, wäre wahrscheinlich eine Variation davon. Hier wird ein äußerer Container verwendet, um den äußeren Gutter-Abstand mit links- und rechtsseitigem Padding zu steuern, und ein inneres Zeilenelement wird verwendet, um den Inhalt auf eine maximale Breite zu beschränken. Die Zeile erhält einige Grid-spezifische Stile.

display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 20px;

Diese Regel definiert, dass das Grid aus 12 Spalten besteht, die jeweils eine Breite von einer Fraktionseinheit (fr) haben. Ein Abstand von 20 Pixeln zwischen den Spalten ist ebenfalls angegeben. Mit der eingestellten Spaltentemplate ist der Anfang und das Ende jeder Kind-Spalte mit der Eigenschaft grid-column sehr einfach einzustellen. Zum Beispiel positioniert das Einstellen von grid-column: 3/8 dieses Element so, dass es bei Spalte drei beginnt und fünf Spalten bis Spalte acht überspannt.

Wir sehen bereits viel Wert in dem, was CSS Grid in diesem einen Beispiel bietet, aber dieser Ansatz hat einige Einschränkungen. Ein Problem ist Internet Explorer, der keine Unterstützung für die grid-gap-Eigenschaft hat. Ein weiteres Problem ist, dass dieser 12-Spalten-Ansatz keine Möglichkeit bietet, Spalten am Ende von Gaps oder Spalten am Anfang von Gaps zu starten. Dafür ist ein anderes System erforderlich.

Strategie 2: Ein flexibleres Grid

Siehe den Stift
More Flexible Grid Placement von chris geel (@RadDog25)
auf CodePen.

Obwohl grid-gap für IE möglicherweise nicht geeignet ist, kann das Aussehen von Gaps wiederhergestellt werden, indem die Abstände als Teil des Grid-Templates selbst einbezogen werden. Die repeat-Funktion, die für grid-template-columns verfügbar ist, akzeptiert nicht nur eine einzelne Spaltenbreite als Argument, sondern wiederholte Muster beliebiger Länge. Zu diesem Zweck kann ein Muster aus Spalte-dann-Gap 11 Mal wiederholt werden, und dann kann die letzte Spalte eingefügt werden, um das gewünschte 12-Spalten-/11-Innen-Gap-Layout zu vervollständigen.

grid-template-columns: repeat(11, 1fr 20px) 1fr;

Dies umgeht das IE-Problem und ermöglicht es auch, Spalten an Spalten oder Gaps zu beginnen und zu beenden. Obwohl dies eine schöne Verbesserung gegenüber der vorherigen Methode ist, hat sie immer noch Raum für Wachstum. Was ist zum Beispiel, wenn eine Spalte so positioniert werden soll, dass eine Seite bis zum äußeren Rand des Bildschirms reicht und die andere in das Grid-System passt? Hier ist ein Beispiel

In diesem Layout beginnt und endet die Karte (unsere linke Spalte) innerhalb des Grids. Das Hauptbild (unsere rechte Spalte) beginnt ebenfalls innerhalb des Grids, erstreckt sich aber über das Grid hinaus bis zum Bildschirmrand. Das Schreiben von CSS dafür kann eine Herausforderung sein. Ein Ansatz wäre, das Bild absolut zu positionieren und es am rechten Rand zu befestigen, aber dies hat den Nachteil, dass es aus dem Dokumentfluss genommen wird (was ein Problem sein könnte, wenn das Bild höher als die Karte ist). Eine andere Idee wäre die Verwendung von Floats oder Flexbox, um den Dokumentfluss beizubehalten, aber dies würde einige knifflige einmalige Berechnungen erfordern, um die Breiten und Abstände genau richtig hinzubekommen. Schauen wir uns eine bessere Methode an.

Strategie 3: Ein noch flexibleres Grid

Siehe den Stift
Right Edge Aligned image with grid von chris geel (@RadDog25)
auf CodePen.

Diese Technik baut auf der Idee der letzten Revision auf. Anstatt dass das Grid innerhalb anderer Elemente existiert, die die Gutter-Größen und Zeilenbreiten definieren, integrieren wir diese Abstände nun in das Muster des Grids. Da die Gutters, Spalten und Gaps alle in die Template integriert sind, können Kind-Elemente mit der grid-column-Eigenschaft einfach und präzise auf dem Grid positioniert werden.

$row-width: 1140px;
$gutter: 30px;
$gap: 20px;
$break: $row-width + 2 * $gutter;
$col-width-post-break: ($row-width - 11 * $gap) / 12;
  
.container {
  display: grid;
  grid-template-columns: $gutter repeat(11, calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) #{$gap}) calc((100% - 2 * #{$gutter} - 11 * #{$gap})/12) $gutter;
  @media screen and (min-width: #{$break}) {
    grid-template-columns: calc(0.5 * (100% - #{$row-width})) repeat(11, #{$col-width- post-break} #{$gap}) #{$col-width-post-break} calc(0.5 * (100% - #{$row-width}));
  }
}

Ja, einige Berechnungen sind erforderlich, um dies genau richtig hinzubekommen. Es ist wichtig, dass das Template vor und nach dem Erreichen der maximalen Breite der Zeile unterschiedlich eingestellt ist. Ich habe mich für SCSS entschieden, da die Definition von Variablen die Berechnung wesentlich überschaubarer (und nicht zuletzt lesbarer für andere Entwickler) machen kann. Was als 12-teiliges Muster begann, wuchs zu einem 23-teiligen Muster mit der Integration der 11 Innen-Gaps und besteht nun aus 25 Teilen, die die linken und rechten Gutters berücksichtigen.

Eine coole Sache an diesem Ansatz ist, dass er als Grundlage für jedes Layout dienen kann, das dem Grid entspricht, sobald das Muster eingestellt ist, einschließlich traditionell umständlicher Layouts, bei denen Spalten bis zu äußeren Rändern reichen. Darüber hinaus dient er als unkomplizierte Möglichkeit, Designs präzise zu implementieren, die wahrscheinlich in hochwertigen Mockups übergeben werden. Das sollte sowohl Entwickler als auch Designer glücklich machen!

Es gibt ein paar Vorbehalte…

Obwohl diese Techniken zur Lösung traditionell umständlicher Styling-Probleme verwendet werden können, sind sie keine Allheilmittel. Stattdessen sollten sie als alternative Werkzeuge für die richtige Anwendung betrachtet werden.

Eine Situation, in der die zweiten und dritten Layout-Muster nicht geeignet sind, sind Layouts, die Auto-Placement erfordern. Eine andere wäre die Unterstützung von Browsern in Produktionsumgebungen, die nicht gut mit CSS Grid zurechtkommen.