Beiträge im Jahr 2018

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

Weiterlesen

fest – flüssig – responsive – adaptive

Meine Erfahrung nach sind Layoutarten wie fest, flüssig, responsive oder adaptive gerade für Einsteiger schwer zuzuordnen. Deswegen habe ich jetzt einmal Minimalbeispiele gebastelt, die nur diese Begriffe verdeutlichen sollen. Um die Unterschiede nachvollziehen zu können, muss man das Browserfenster schmaler ziehen. Und ich habe eine Vereinfachung durchgeführt: ich zeige die unterschiedlichen Layouttypen nicht an vollständigen Layouts, sondern stelle jeweils zwei Bereiche gegenüber, die das unterschiedliche Verhalten deutlich machen. Weiterlesen