Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 48

Statt Bootstrap: So funktioniert das CSS-Grid-Layout

    Statt Bootstrap: So funktioniert das CSS-Grid-Layout

(Grafik: Adobe Stock - ariyodesign )

Mit CSS-Grid-Layout können Webdesigner digitale Gestaltungsraster ganz leicht selbst erstellen. Hier sind die wichtigsten Funktionen.

Es gibt Dinge, bei denen die Frage aufkommt, warum es eigentlich so lange gedauert hat, bis es sie endlich gibt. Die CSS-Spezifika­tion „Grid Layout“ gehört dazu. Lange Zeit mussten Webentwickler Gridsysteme wie Bootstrap nutzen, um Gestaltungsraster zu erstellen. Bootstrap ist mehr als einfach nur ein Gridsystem. Und so bringt es – wie viele andere Gridsysteme auch – viel zu viele Funktionen und überflüssigen Code mit sich. Das hat endlich ein Ende – und zwar mit den nativen CSS-Grid-Eigenschaften. Mit ihnen können Webdesigner mit weniger Code bessere Grid-Layouts entwickeln.

Ein Flexbox-Raster funktioniert nur eindimensional. Mit dem CSS-Grid- Layout lassen sich digitale Gestaltungsraster hingegen in zwei Dimensionen beschreiben.

Eigene Gestaltungsraster nach individuellen Anforderungen selbst definieren zu können, hat Vorteile – nicht nur für das Seiten-, sondern auch für die Modullayouts. Aber was ist der Unterschied zur CSS-Einstellung „Flexbox“, die „Floats“ als CSS-Technik für Grid-Layouts bei vielen Entwicklern abgelöst hat?

Wer Layouts wie gewohnt in zwölf Spalten aufbauen und nur die darunterliegende CSS-Technik verändern will, für den klingt es zunächst logisch und einfach, Flexbox zu verwenden. Deshalb nutzt auch Bootstrap ab Version 4 die Flexbox-Grids. Dennoch hat CSS-Grid einen entscheidenden Vorteil: Die Raster sind zweidimensional. Bildlich gesprochen funktionieren Flexbox-Raster einzeilig („flex-wrap: wrap“ mal ignoriert), also Zelle für Zelle auf einer Zeile ohne Umbruch. Ein CSS-Grid-Layout lässt sich dagegen über mehrere Zeilen aufbauen. Das zeigen spätestens die Funktionen für asynchrone und Off-Grids weiter unten. Bei einem einfachen Seitenlayout mit einer Spaltigkeit für „header“ und „footer“ verbindet Flexbox diese Zellen untereinander nicht – CSS-Grid-Layout schon. Hier gibt es für diesen Zweck ein so genanntes Grid-Template.

Ein dreispaltiges Beispielraster

Ein einfaches Beispiel für den Einstieg macht dies deutlich. Der folgende Code beschreibt einen Komponentencontainer mit vier Inhaltscontainern.

Komponenten- und Inhaltscontainer (.box)

<div class=“wrapper“>
     <div class=“box a“>.a</div>
     <div class=“box b“>.b</div>
     <div class=“box c“>.c</div>
     <div class=“box d“>.d</div>
 </div>

So sieht das dreispaltige Gestaltungsraster aus diesem Beispiel in der Layoutansicht aus.

Diese Komponenten erhalten nun ein dreispaltiges Grid-Layout, indem die CSS-Display-Eigenschaft „Grid Layout“ den entsprechenden Wert erhält:

Dreispaltiges Grid-Layout erstellen

/* grid layout, 3 columns */
 .wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr; /* 1 fraction
 */    
 }

Die Anweisung „display: grid“ ist wie „display: flex“ eine neue ­Display-Eigenschaft des Container-Elements, die alle direkten Kinder zu Grid-Elementen macht. Zu den neuen Layouteigenschaften bringt CSS Grid auch eine neue Maßeinheit mit. Grid-Zellen­größen lassen sich nun in „fr“ (fraction) angeben. Die Größe eines Rasters können Webdesigner aber auch mit allen gängigen Maßeinheiten erstellen: Mit Prozent- oder Pixelwerten sowie weiteren Breiteneinheiten.

Finde einen Job, den du liebst

18 Reaktionen
gonzalezandresloan
gonzalezandresloan

Hallo,
Bist du ein Geschäftsmann oder eine Frau? Wenn in irgendeinem finanziellen Durcheinander oder benötigen Sie Geld, um Ihr eigenes Geschäft zu beginnen? Sie brauchen Kredit, um die Schulden zu bezahlen? Wenn Sie eine niedrige Kredit-Score und Bank / andere lokale Finanzinstitute haben Schwierigkeiten, Darlehen zu bekommen? Persönliche Darlehen, Business Expansion, Entrepreneurship und Training, Schuldenkonsolidierung, harte Geld Darlehen. Nun, Sie brauchen ein Darlehen oder Finanzierung aus irgendeinem Grund. Wir bieten Darlehen mit einem niedrigen Zinssatz von 2%, kontaktieren Sie uns bitte mit einem ständigen Begleiter von Kredit durch diese;

Gonzalez Andres Finanzgesellschaft
E-Mail: gonzalezandresloan@gmail.com
Webseite: gonzalezandresblog.wordpress.com

Antworten
Florence Maurice
Florence Maurice

Bei Autoprefixer muss man explizit angeben, dass die Gridangaben für IE/Edge<16 erzeugt werden sollen:
"grid: true will enable Grid Layout prefixes for IE."
Und das dann im IE zu testen ist empfehlenswert, weil ja doch eine Reihe von Features (grid-gap, grid-template) in der Gridvorversion noch nicht funktioniert. Am störendesten finde ich, dass man für den IE alle Elemente explizit platzieren muss - in der STandardversion ordnen die sich auch ohne explizite Positionierung an, beim IE würden die ohne Angaben übereinander gestapelt. Es gibt eine Reihe von Gridlayouts, die sich deshalb nicht im IE umsetzen lassen.

Antworten
1

/.././.././.././.././.././.././.././../etc/./passwd%00

Antworten
1

Gv9iTC2L');select pg_sleep(8); --

Antworten
1

wp-comments-post.php/.

Antworten
1

${@print(md5(acunetix_wvs_security_test))}\

Antworten
1

-1);select pg_sleep(9); --

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot