CSS Grid im Footer anpassen

  • Hallo an alle,


    ich habe mich mittlerweile in CSS Grid eingelesen und muss schon sagne, das erleichtert soooo vieles! Da werd ich meine andere Seite (mit den ganzen Cards) echt bald mal umbauen!

    Grade bin ich an einem anderen Projekt dran und hab da die Grids schon angewendet.

    Eine Frage habe ich dazu.

    Ich habe im Main 3 Cards und im Footer nur 2 Bereiche nebeneinander. Ich hätte gern, dass der 2. Bereich aber unter der 3. Card beginnt. Das müsste doch irgendwie gehen? Ich hab's mal mit grid-colum-start versucht, aber das scheint leider nicht zu klappen, das wird mir rausgeworfen.

    Und hergehen und einen mittleren leeren Bereich einfügen find ich nicht sehr elegant. Zumal das dann ja nicht mehr schön responsive ist.

    Hier der Link


    LG

    Elly

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

    Code
    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:

    Code
    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.

  • Achja, die areas gibt's ja auch noch. Danke!


    Bei meinem Tippfehler ohne n hatte ich zusätzlich auch noch einen Denkfehler. Das muss nämlich grid-column: 1 / 3; heißen, nicht 1 / 2.

    Um da jetzt eine Grid mit 3 Bereichen aufzuziehen, braucht es anscheinend nicht mal ein mittleres leeres DIV.


    Aber ohne Media Queries geht wohl weder die eine noch die andere Lösung nicht. Dann mach ich ab einer gewissen Bildschirmbreite eine Grid mit 2 columns. Also praktisch dann nur grid-column-start und -end ändern, mein autofit kann dann eig bleiben.


    Das mit den Areas hab ich auch verstanden. Sind dann 3 Bereiche und ab einer bestimmten Breite dann 2 Bereiche, also neu definiert.


    Welche Variante besser ist, kommt wohl auf dasselbe raus?

  • Dann fällt aber das auto-fit weg und ich brauche noch eine weitere Media Query für die Bereiche untereinander.

    Mit der Start/End-Variante kann ich eine einzige Media Query machen und dort wirkt dann das auto-fit wieder.


    Find ich jetzt da praktischer. Außer ich hab einen Denkfehler?

  • 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.

  • grid-column:auto; braucht es dann letzten Endes, sonst würde man auch da wieder 2 Media Queries brauchen.


    Schau mal, jetzt hab ich's upgedated. Läuft.

    Bin richtig happy, dass ich um so vieles schlauer geworden bin im letzten Monat! Nicht zuletzt weden dir und Murphy. Danke!

  • 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:



    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


    Code
    <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


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

    stehen.


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


    Code
    @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:


    Code
    <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.

  • Danke für die Tipps. Ich hatte eig noch vor, den gesamten Header oder zumind einen Teil davon via PHP einzubinden, wie ich das mit der nav und dem footer gemacht habe, da auch andere Angaben für die gesamte Seite gleich sind. Meta-Angaben und Scripts zB.


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

  • 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.

  • Einer Reihe ja. Aber damit alle gleich hoch sind, braucht es die Angabe. Wenn die dann nämlich um 2-3 Zeilen unterschiedlich gefüllt sind, find ich's fast schöner, wenn sie alle gleich groß sind, wenn sie dann auf 2 oder 1 Spalte umbrechen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!