Das Erstellen sauberer, gut ausgerichteter Kartenlayouts ist eine gängige Aufgabe in der Webentwicklung. In diesem Tutorial führe ich Sie durch den Aufbau eines Rasters mit vier Karten pro Zeile. Jede Karte enthält mehrere Inhaltsblöcke – einen Titel, ein Bild, einen Preis, eine Aufzählungsliste und eine Call-to-Action (CTA)-Schaltfläche – die mithilfe von CSS Grid und der leistungsstarken CSS Subgrid-Funktion horizontal innerhalb der Karte ausgerichtet sind. Was Sie erstellen werden: - Ein Kartenraster-Layout (maximal 4 Karten pro Zeile). - Jede Karte enthält mehrere Inhaltsblöcke, die horizontal ausgerichtet sind. - Verwendung von CSS Grid für das Gesamtlayout. - Verwendung von CSS Subgrid für die innere Ausrichtung des Inhalts innerhalb jeder Karte. Warum CSS Subgrid verwenden? CSS Subgrid ist eine relativ neue Funktion, mit der ein verschachteltes Raster die Spurgröße seines übergeordneten Rasters erben kann. Das bedeutet, dass Sie den inneren Inhalt perfekt an dem äußeren Raster ausrichten können, ohne die Spurgrößen manuell berechnen oder duplizieren zu müssen.