Ein Kalender in drei CSS-Zeilen

, Author

Ich habe noch nicht viel mit CSS Grid gearbeitet, und dies schien mir eine gute Gelegenheit zu sein, es auszuprobieren. Für meinen Kalender habe ich die Daten in ein Pseudo-Element verschoben, das counter() verwendet, um sie automatisch zu erhöhen, so dass ich es ermöglichen konnte, Inhalte innerhalb jedes Datums zu schreiben, ohne auch zusätzliche Elemente zu haben, um sie zu trennen.

Ich habe auch den Grid-Offset zu einer CSS-Variablen gemacht, so dass es einfacher war, den gleichen Code für mehr Monate wiederzuverwenden, und habe ein bisschen einfaches Vanilla JS verwendet, um eine zusätzliche Klasse auf das heutige Datum anzuwenden, so dass es ein bisschen mehr präsentiert wird.

Aber wie gesagt… ich bin neu im Grid und das größte Problem ist, dass das Grid auf kleineren Bildschirmen zusammenbricht.

Auf dem Desktop sieht es toll aus, aber sobald man einen bestimmten Breakpoint erreicht, werden die eigentlichen Kalenderelemente zu den gefürchteten CSS-Flussproblemen. Ich habe versucht, das wrapper-Element anzupassen, um eine maximale Breite festzulegen, aber das scheint das Problem nicht zu beheben. Ist dies eine Grid-Sache, die jemand einen Neuling aufklären könnte, oder übersehe ich einfach etwas?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.