Hallo, Besucher der Thread wurde 448 aufgerufen und enthält 13 Antworten

letzter Beitrag von Micky12 am

[CSS] Grid-Boxen (z.B. für Artikel-, Blog-Einträge)

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,

    viele würden sich wünschen auf Ihrer Startseite (Dashboard) die "Neusten Einträge" wie zum Beispiel die Artikel, Blogs, Lexikon-Einträge nebeneinander anstatt untereinander darzustellen. Dies kann relativ einfach per CSS mittels


    Features


    • Pures CSS
    • Individuell an Deinen Stil anpassbar




    Demo


    Eine Live Demo kann auf Belarusinfo.de eingesehen werden ;)

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Bitte beachte das @media screen and (min-width: 1025px) welches zwingend erhalten bleiben muss! Andererseits würde der Quellcode auch bei kleineren Auflösungen greifen, womit die Darstellung beeinträchtigt werden würde!


    Benutzung

    1. Gehe zu Anpassung Stile DEIN_STYLE Erweiterte Einstellungen Individuelles CSS und SCSS
    2. Füge dort den o.g. CSS-Quellcode ein und passe diesen nach eigenen Wünschen an (Beachte dazu den nachfolgenden Punkt: Anpassung!).
    3. Fertig!

    Anpassung

    Mit den CSS-Grid-System lassen sich auch andere Systeminterne oder auch eigens erstellte Boxen nebeneinander darstellen. Die Darstellung der Boxen, wie Anzahl in einer Reihe, der Abstand, etc. kann dabei individuell gestaltet werden. Informationen zum CSS-Grid-System kann hier gefunden werden: developer.mozilla.org: CSS Grid Layout. Als kleine Erläuterung wie das Grid-System funktioniert:

    Mit display: grid; werden die per CSS-Klasse angewiesenen Boxen im Grid-System dargestellt. Diese wiederum werden mittels grid-template-columns: repeat(2, 1fr); angeordnet. Die darin enthaltene "2" steht für die Anzahl der Boxen in einer Reihe und "1fr" für die Breite. Mit gap: 20px; wird den einzelnen Boxen letztlich der Außenabstand zugewiesen. Mit anderen Worten wäre "repeat(2, 1fr)" das gleiche wie: "Wiederholung ( Anzahl der Boxen in einer Reihe , Breite)". Die Angaben der Breite können dabei natürlich auch in Pixel (px), Prozenten (%) oder anderen Werten angegeben werden. Wer möchte, der kann die Darstellung der Boxen auch mit mehr als 2 Boxen in einer Reihe oder gar komplexer mit unterschiedlichen Größen (ähnlich dem Metro-Design) darstellen. Da dieses aber hier den Rahmen sprengen würde, können Informationen dazu hier entnommen werden: developer.mozilla.org: CSS Grid Layout.

    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

    Screenshots



    Wer die Überschriften wie hier auf den Screenshots mit einer Trennlinie versehen möchte, der findet hier eine Anleitung dazu: [CSS] Trennlinien neben Überschriften ;)


    Gruss,
    Andreas

    Eine Frage aus Interesse. Warum setzt du bei einem so simplen Layout bereits auf grid und nicht auf Flexbox? Immerhin handelt es sich hier nicht um ein Masonry Layout.

    Warum setzt du bei einem so simplen Layout bereits auf grid und nicht auf Flexbox?

    1. Ist dies nur ein Beispiel
    2. Ob nun grid oder Flex macht hier keinen Unterschied
    3. Ist dies kein Layout sondern eine Gestaltung innerhalb eines Layout
    4. Wer lieber flex nutzen möchte kann das natürlich gern damit bewerkstelligen


    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

    Dieses Thema enthält 11 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.
  • Dieses Thema enthält 11 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!