Tipps und Tricks Filter

Eine Seite zurück
Reset Filterauswahl

Elementengruppe und Grid Spalten

Um innerhalb einer Elementgruppe nun zwei Text-Elemente nebeneinander anzuzeigen, habe ich in CSS eine Klasse und 4 Helper Klassen definiert wie folgt:

/* Grid */
.grid2cl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
/* Grid Helper */
.ji_center {
    justify-items: center;
}
.ji_left {
    justify-items: left;
}
.jc_center {
    justify-content: center;
}
.jc_left {
    justify-content: flex-start;
}

In den Eigenschaften der Elementgruppe gebe ich nun die benötigen Klassen ein, in meinem Beispiel:

grid2cl ji_center jc_center

Damit wäre es für das Frontend nun geschafft. Das könnte dann so aussehen, violett sind hier mal die Grid Fractions zu sehen und der 1rem gap:

Im Backend stehen die Textelemente in der Preview Ansicht aber noch untereinander. Aber wir haben Glück, die CSS Klassen werden auch im Backend mit übergeben.

In der Form: <div id="article-56" class="mod_article grid2cl ji_center jc_center block">

Wenn man nun eine eigene Backend CSS hat, zum Beispiel aus diesem Grund, kann man die Klassen Definitionen von oben einfach dort mit eintragen, und schon sind diese auch hier nebeneinander:

Wer auf Nummer sicher gehen will, kann das im Backend noch auf die Preview Ansicht einschränken:

.cte_preview .grid2cl {
/* Definitionen wie im Frontend */
}
.cte_preview .ji_center {
/* Definitionen wie im Frontend */
}
/* und weitere */

Aufmerksame Leser haben sicherlich bemerkt, im Label steht zusätzlich "(2 Spalten)". Das wurde mit einer weiteren CSS Angabe ermöglicht. Hier mal für deutsch und englisch als Standard.

/* Label für die Grid Klassen in der Backend Vorschau */
.cte_type:has(+ .cte_content .grid2cl) > div::before {
    content: "(2 Columns) ";
}
.cte_type:has(+ .cte_content .grid2cl):lang(de) > div::before {
    content: "(2 Spalten) ";
}