CSS Grid im Footer anpassen

Das geht auch ohne leeren Platzhalter und zwar am einfachsten mit template-areas. Dabei kannst Du mit einem Punkt einen leeren Bereich definieren:

footer .grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    /* grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); */
    /* grid-auto-rows: 100px; */
    grid-gap: 20px 20px;
    grid-template-areas: "kontakt . social";
    grid-template-columns: 1fr 1fr 1fr;
}

Dazu musst du zusätzlich den beiden Containern ihren Namen zuweisen:

footer .grid .kontakt {
    /* grid-colum: 1 / 2; */
    grid-area: kontakt;
}

Mit grid-column geht es auch, aber da hast Du einen Schreibfehler drin, das "n" am Ende vergessen.

Leider funktioniert dann das responsive Verhalten nicht mehr so elegant wie bei den .card darüber, man müsste das Umschalten auf zwei- und einspaltig mit Mediaqueries realisieren.

Von der Funktion her ist es gleich, aber persönlich finde ich das Verfahren mit den Areas übersichtlicher und einfacher.

Da hast Du möglicher Weise Recht. Wenn man das auto-fit betrachtet, ist das Start/End u. U. praktischer. Die template-areas sind starr und entfalten ihren Vorteil eher, wenn man mit Cellspanning arbeitet, was hier nicht der Fall ist.

Gefällt, das sieht gut aus.

Du könntest noch zwei Verbesserungen vornehmen:

Bei der Klasse grid können die beiden rows-Anweisungen gelöscht werden. Die bewirken nichts.

Bei der Klasse socialmedia wäre eigentlich grid-column: 3 / 4; korrekt. Wenn ein Container nur eine Spalte füllen soll reicht auch immer die erste Zahl, also grid-column: 3;

Ich habe mal ein Online-Beispiel erzeugt um zu zeigen, wie wenige Anweisungen für CSS-Grid erforderlich sind, um das drei- /zwei-Spalten-Layout zu erzeugen. Außer den Grid-Anweisungen habe ich nur CSS-Anweisungen benutzt um die Container optisch anzuzeigen.

https://www.w3schools.com/

Nach dem Starten mittels des grünen Run-Buttons kann die Fensterbreite durch Verschieben des Mittelstegs geändert werden. Die grid-column: auto; Anweisungen sind in diesem Fall überflüssig, da die Seite nach den Mobile-First-Konzept erstellt ist und das die Standardvorgaben bei CSS-Grid sind.

Die grid erzeugenden Anweisungen in den beiden Containern grid-zwei-spalten und grid-drei-spalten sind identisch und könnten auch noch zusammengefasst werden. Dann bleiben nur die folgenden CSS-Anweisungen für das Grid-Layout übrig:

   /*.grid-zwei-spalten,
     .grid-drei-spalten*/
   @media all {
      .grid-zwei-spalten,
      .grid-drei-spalten {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 0.5rem;
      }
   }

   /*.grid-zwei-spalten*/
   @media only screen and (min-width: 821px) {
      .grid-zwei-spalten>:nth-child(1) {
         grid-column: 1 / 3;
      }
      .grid-zwei-spalten>:nth-child(2) {
         grid-column: 3;
      }
   }

Alles andere ist überflüssig. 5 CSS-Angaben mit 3 Größenangaben.

Da im Grid-CSS keine HTML-Elementnamen verwendet werden können die beliebig geändert werden, nur die einfache Struktur muss passen.

rows-Anweisungen sind nicht notwendig, wie es bei CSS-Grid häufig der Fall ist.

Noch ein kleiner Tip am Rande:

Um den head-Bereich übersichtlicher zu gestalten kann die Einbindung der CSS-Dateien auch "ausgelagert" werden. Ich selbst verwende dafür eine "zentrale.css".

Statt

<link rel="stylesheet" href="fontawesome/css/all.css">

<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="stylesheets/bootstrap_carousel.css">

<link rel="stylesheet" href="stylesheets/main.css">
<link rel="stylesheet" href="stylesheets/nav.css">
<link rel="stylesheet" href="stylesheets/footer.css">
<link rel="stylesheet" href="stylesheets/responsive.css">

würde im head-Bereich dann nur noch

<link rel="stylesheet" href="stylesheets/zentrale.css">

stehen.

In der zentrale.css werden die CSS-Dateien folgendermaßen eingebunden:

@import url(../fontawesome/css/all.css);

@import url(bootstrap.min.css);
@import url(bootstrap_carousel.css);

@import url(main.css);
@import url(nav.css);
@import url(footer.css);
@import url(responive.css);

Die Pfadangaben gehen vom Standort der zentrale.css aus.

So stehen alle CSS-Dateien direkt allen Webseiten zur Verfügung. Durch das "z" von zentrale.css sollte die Datei im Regelfall bei der üblichen Sortierung als letzte im Dateimanager angezeigt werden und ist deshalb schnell zu finden, falls dort Änderungen durchgeführt werden sollen.

Falls für eine Webseite ein zusätzliches, nur für die Seite gültiges CSS erforderlich ist, binde ich die dafür erforderliche CSS-Datei halt zusätzlich ein. So zum Beispiel für die Mitglieder-Seite:

<link rel="stylesheet" href="stylesheets/zentrale.css">
<link rel="stylesheet" href="stylesheets/mitglieder.css">

Immer noch übersichtlich. Und selbst wenn die Dateien nach langer Zeit mal wieder bearbeitet werden fällt sofort ins Auge, dass es für diese Webseite zusätzliche CSS-Regeln gibt. Das erleichtert die langfristige Pflege.

Vielleicht ist das für dich eine Überlegung wert.

Zitat

wieso hast du da jetzt ein only screen in der MQ? Könnte doch auch für all sein?

In diesem Fall - ja. Bei meinem Vorgehen (Mobile First) sind die Grundangaben in der Regel aber schon gut für's Drucken geeignet. Falls trotzdem ein Drucklayout erforderlich ist erstelle ich lieber ein zusätzliches Layout, da Druckerbreiten nichts mit Fensterbreiten zu tun haben.

Zitat

Die erste brauche ich, damit mir alle Cards gleich hoch anzeigt werden, oder?

Meiner Kenntnis nach passen sich die Container einer Reihe jeweils an das Höchste an. Das siehst du ja auch an meinem Beispiel. Das ist meist ja auch gewünscht. Das kannst du auf deiner Seite doch auch einfach ausprobieren.

Ist deine Entscheidung.