Bei meinem Grid-Workshop auf den HTML & CSS Days in München kam die Frage auf, wie sich die Abstände zwischen den Rasterzellen – grid-gap – verhalten, wenn zusätzlich die Ausrichtung beispielsweise mit justify-content und align-content festgelegt wird. Hier sind die Details.
Archiv
fit-content und fit-content()
Ich schreibe gerade an einem Artikel zu den Möglichkeiten, die Ausmaße in CSS zu bestimmen für die Zeitung web&mobile developer und dabei bin ich über fit-content gestolpert, das einiges Verwirrendes beinhaltet. Weiterlesen
CSS Grid: Automatisches responsives Raster mit Lücken
Mit CSS-Grid lassen sich dank der magischen Formel repeat(auto-fill, minmax()) sehr gut Raster erstellen, die sich automatisch an alle Viewportgrößen anpassen, die Spaltenzahl wird dabei nach Bedarf ermittelt. Dabei werden die Elemente automatisch auf das Raster verteilt in der Reihenfolge, in der sie im Quellcode stehen. Keine Rasterzelle wird dabei ausgelassen. Was macht man, wenn aber genau das gewünscht ist? Also:
- ein flexibles responsives Raster
- mit Lücken
- aber ohne Media Queries
min-content, max-content und grid-template-rows bei CSS Grid
min-content und max-content sind sehr praktisch beim CSS-Grid-Layout zur Definition von Rasterspalten. Was aber bewirken sie genau bei der Definition von Rasterzeilen? Weiterlesen
CSS Grid: Tricksen mit verschachtelten Grids
Eine Besonderheit bei Grid ist, dass man damit immer nur die direkten Kindelemente anordnen kann – nicht die Kindeskinder oder andere Nachfahren. Aber es gibt einen schönen Trick, wie man in einem Speziallfall doch scheinbar die Unterelemente mitanordnen kann und ein verschachteltes Grid für „ein Raster“ nutzen kann.
display: contents bei Gridlayout & Flexbox
Eines haben Gridlayout und Flexbox gemeinsam: Wenn man die Grid/Flexbox-Darstellung aktiviert, so lassen sich dann nur die echten Kindelemente anordnen, aber keine weiteren Nachkommen. Das diktiert einem aber auch eine entsprechende Struktur und manchmal passt es nicht … Abhilfe bietet die Eigenschaft display: contents.
Layouten mit Gridlayout und mit Flexbox im Vergleich
Lange Zeit hatten wir keine vernünftige Layouttechnik – und jetzt haben wir gleich zwei: Flexbox und Gridlayout. Gridlayout ist mächtiger, das ist klar. Brauchen wir damit überhaupt noch Flexbox? Diese Frage beantwortet man am besten an praktischen Beispielen – hier zeige ich ein Sticky-Footer-Layout, das dann erweitert wird, und führe vor, wie man das Layout in seinen Variationen jeweils mit Gridlayout und mit Flexbox umsetzt. Weiterlesen
justify-content: space-evenly bei Flexbox und Gridlayout
Durch justify-content: space-around wird bei Flexbox und Gridlayout der Leerraum zwischen den Items und am Anfang und Ende ergänzt. Zwischen den Items ist der Leerraum jedoch doppelt so groß wie am Anfang und am Ende. Manchmal hätte man es aber auch alle Abstände gleich – also space-evenly. Das funktioniert bei Gridlayout, für Flexbox ist es vorgesehen, funktioniert aber noch nicht in allen Flexbox-Browsern. Aber man das gewünschte Verhalten durch etwas Trickserei erreichen …
Flexbox vs Gridlayout: einfache Navigation mit unbekannter Anzahl an Punkten
Für einfache Layoutanordnungen ist Flexbox das Mittel der Wahl, das ist klar. Trotzdem hat mich interessiert, wie man folgenden Fall mit Gridlayout löst – eine horizontale Navigation mit unbekannter Anzahl an Navigationspunkten, wobei der Platz aber bestmöglich ausgenutzt wird. Im Vergleich dazu zeige ich auch die Lösung mit Flexbox.
CSS-Gridlayout ausrichten mit align-content, justify-content, align-items und justify-items
Ich beschäftige mich gerade genauer mit dem CSS3-Gridlayout. Dort kann man Elemente über vier Eigenschaften ausrichten: align-content, justify-content, align-items und justify-items. Um mir besser zu merken, was genau wie wirkt, habe ich mir einen kleinen Spickzettel gebastelt. Weiterlesen