So erstellen Sie ein Kartenlayout mit CSS Grid Layout

Anmerkung des Herausgebers: Dieser Gastbeitrag wurde von Abbey Fitzgerald geschrieben, einer UX-Softwareentwicklerin und Webdesignerin, die die Kunst des Programmierens liebt.

CSS-Grid-Layouts verändern die Arbeitsweise von Webdesignern und ermöglichen eine effizientere Art, Website-Inhalte zu gestalten.

Es wurde lange darauf gewartet, aber endlich hat sich dieser Ansatz wirklich durchgesetzt und ist in vielen Fällen in Produktion. Es hat die Art und Weise, wie Websites gestaltet werden, revolutioniert, und sobald Designer den Dreh raus haben, wird es den Weblayouts mehr Flexibilität verleihen.

Wenn Sie versucht haben, mit CSS Grid zu entwerfen und Tutorials im Internet gelesen haben, haben Sie möglicherweise Informationen gefunden, die sich auf einen allgemeinen Layout-Ansatz beziehen. Dinge wie: Kopfzeile, Inhalt, Fußzeile usw.

CSS Grid kann jedoch auch für andere Website-Details wie Karten nützlich sein. Kartenlayouts sind eine gängige Art, Inhalte anzuzeigen, und sie können effizient mit CSS Grid erstellt werden. Durch die Verwendung dieser Methode sind Karteninhaltsbereiche leicht wiederholbar, können auf vielen verschiedenen Gerätetypen angezeigt werden und die Größe lässt sich leicht steuern.

CSS-Grid-Layout-Tools

Während Sie fortfahren, werden Sie die Dinge auf der Seite überprüfen wollen. Firefox verfügt über großartige Entwicklertools zum Anzeigen von Rasterbereichen. Mit den Firefox-Entwicklertools können Sie ein Overlay sehen, das das Raster umreißt. Firefox Developer Edition hat auch diese Fähigkeit.

Wählen Sie das Überlagerungsraster aus, das Sie anzeigen möchten (je nach Design kann es mehr als eines geben). Die Rasteranzeigeeinstellungen ermöglichen Ihnen eine genauere Betrachtung, indem Sie die Zeilennummer, Bereichsnamen und die gewünschte Verlängerung der Zeilen anzeigen. Dies wird beim Entwerfen hilfreich sein.

Einfache Karten mit CSS-Grid-Layout

Wenn Sie neu bei CSS Grid sind, sollten Sie die Grundlagen auffrischen und ein einfaches CSS-Grid-Layout erstellen. Karten sind eine großartige Möglichkeit, Inhalte anzuzeigen, sowie ein interessantes UI-Element, das intuitiv zu verwenden ist. Sie bieten Benutzern auch ein großartiges Format, um Inhalte schnell zu scannen und sich mit dem zu beschäftigen, was sie am meisten interessiert. Karten ermöglichen es Designern auch, Inhalte auf visuell ansprechende Weise zu formatieren, mit großartigen Bildern, Einführungsinhalten, Links und mehr!

Karten und gesamtes Seitenlayout

Nebenbei ist es wichtig zu wissen, dass CSS Grid nicht auf einem ganzen Seitenlayout verwendet werden muss. Raster können bei Bedarf in bestimmten Bereichen der Seite verwendet werden. Da dies ein Tutorial zu Kartenlayouts ist, kann hier ausschließlich ein Grid-Ansatz verwendet werden, auch wenn der Rest der Seite kein CSS-Grid verwendet. Solange der Rasterbereich definiert ist und display: grid; auf dem Wrapper deklariert ist, kann dieser Ansatz verwendet werden.

Arbeiten mit einer festgelegten Anzahl von Karten

In einigen Fällen ist es einfach, eine festgelegte Anzahl von Karten einzuplanen. Bei einer festgelegten Menge an Inhalten bleibt die Anzahl der Karten gleich. Beispielsweise können vier Karten vorhanden sein, die Geschäftsangebote erläutern, wobei jedes Angebot auf einer eigenen Karte steht.

In diesem Beispiel (und den anderen) befinden sich alle .card Elemente in einem .cards Containerelement. Um dies zu erreichen, ist es ziemlich einfach.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

Es ist wichtig, den Wert von .cards im Raster anzuzeigen. Ohne diese können keine Rasterbereiche erstellt werden. Der nächste Schritt besteht darin, die grid-template-columns zu definieren und das Styling auszuwählen. Das eigentliche Kartendesign wird mit der Klasse .card deklariert.

In diesem Beispiel sehen Sie mehrere Artikel-Tags mit der Klasse .card . Sehen Sie es auf Codepen.

Wiederholen Sie dies für die eingestellte Kartenanzahl

Hier nehmen die Karten Gestalt an. Um eine fließende Anzahl von Spalten pro Zeile zu erstellen, wird repeat mit der Funktion repeat() verwendet. Diese Funktion benötigt zwei Argumente: die Anzahl der Wiederholungen und den zu wiederholenden Wert.

Zum Beispiel grid-template-columns: repeat(3, 200px); berechnet zu grid-template-columns: 200px 200px 200px; .

Brucheinheit

Sie werden sehen, dass der Beispielcode ein „fr“ verwendet. Was ist das genau? Diese Maßeinheit wurde mit CSS Grid populär. Fr bedeutet „Brucheinheit“ und 1fr nimmt 1 Teil des verfügbaren Platzes ein. Es hilft, Raumberechnungen zu vereinfachen.

Brucheinheiten können allein verwendet werden oder Sie können eine Breite von 1fr angeben und Sie können auch untergeordnete Elemente hinzufügen. Mehrere fr werden gleichmäßig auf alle untergeordneten Elemente verteilt.

Es können verschiedene Brucheinheiten angegeben werden. Wenn beispielsweise die Rasterspalten 1fr 2fr 1fr sind, nehmen zwei Brucheinheiten doppelt so viel Platz ein wie eine Brucheinheit.

Wiederholen Sie dies für eine dynamische Anzahl von Karten

In einigen Fällen wissen Sie möglicherweise nicht, wie viele Karten benötigt werden, sodass die Planung einer festgelegten Anzahl nicht funktioniert. Es wird derselbe Ansatz wie beim Wiederholen verwendet, aber es besteht die Möglichkeit, so viele wie nötig mit Autofill einzufügen.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Breitenangaben werden zusätzlich zum auto-fill benötigt. Denken Sie daran, dass bei einem px-Wert nach rechts Platz sein kann, wenn nicht genug Platz für die Karte vorhanden ist, aber das muss nicht der Fall sein, wie Sie später sehen werden.

Minmax für mehr Kontrolle über die Kartenbreite

Minmax ist die perfekte Lösung, da eine gebrochene Einheit allein die Karten in voller Breite machen würde. Durch das Hinzufügen von Wiederholungen und einem Minmax zur Stildeklaration wird der mögliche Leerraum beseitigt und die Karten erscheinen fließender.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Spalten passen immer in das Raster und die Karten sind mindestens 200 Pixel groß. Wenn der minimale Platz nicht perfekt zum Platz passt, kommt hier die maximale Breite ins Spiel. Wenn eine andere Karte mit einer Breite von 200 Pixel nicht passt, sind die anderen Karten größer als 200 Pixel, sodass sie sich dehnen, um die Reihe mit mehr Platz zu füllen, und der Platz gleichmäßig verteilt wird. [Artikel-ID=“21612″ align=“right“]

Handy, Mobiltelefon

Da die kleinsten und größten Karten geplant sind, ist dies ein guter Zeitpunkt, um über Mobile zu sprechen. Karten funktionieren gut auf größeren und kleineren Geräten, da der Inhalt in verdaulichen Blöcken vorliegt und die Karten problemlos nach oben und unten skaliert werden können. CSS Grid hilft dabei, ein großartiges mobiles Erlebnis zu schaffen, und in einigen Fällen ist es viel einfacher als eine separate Medienabfrage.

In diesem Beispiel müssen Karten verkleinert werden, damit sie in Mobilgeräte passen, und vergrößert werden, damit sie nur einen Bruchteil des verfügbaren Platzes einnehmen, damit sie auf einem kleineren Gerät in voller Breite angezeigt werden, ohne dass eine separate Medienabfrage erforderlich ist:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

Die Mindestbreite der Karte beträgt 300 Pixel. In der Reihe erscheinen so viele 300-Pixel-Karten, wie hineinpassen. Wenn das Gerät sehr klein ist, besteht eine gute Chance, dass nicht genügend Platz für zwei Karten in einer Reihe vorhanden ist. Dann kommt die 1fr ins Spiel. Die Brucheinheit eignet sich hervorragend für responsive Designs. Wenn zwei der 300-Pixel-Karten nicht passen, wird die mobile Ansicht hier sehr deutlich. Wenn 1fr als maximale Breite deklariert wurde, nimmt eine einzelne Karte den gesamten verfügbaren Platz ein und sie werden übereinander gestapelt.

Gitterlücke

Nun, da die Breite der Karten festgelegt ist, muss die Entscheidung getroffen werden, Platz zwischen ihnen zu haben. Diese Eigenschaft ist für Rastercontainer verfügbar und erleichtert das Erstellen von Dachrinnen im Design. Grid-column-gap schafft den Abstand zwischen jeder Karte. Wenn Sie grid-gap sehen, bezieht sich das auf die Abkürzung für grid-row-gap und grid-column-gap . Grid-row-gap ist der Abstand oben und unten auf der Karte, grid-column-gap ist der Abstand links und rechts von der Karte.

CSS-Rasterlayout-Ressourcen

Wenn es um CSS Grid Layouts geht, gibt es viel zu lernen und es gibt viele Möglichkeiten. Der beste Weg, etwas über das CSS-Grid-Layout zu lernen, besteht darin, etwas mehr zu lesen und zu experimentieren. Es gibt viele großartige Ressourcen da draußen, aber hier sind ein paar, um Ihnen den Einstieg zu erleichtern:

• Raster nach Beispiel
• CSS-Grid-Layout-Kurs von Wes Bos
• Mozilla-Einführung in CSS Grid