Hallo,
dieses Thema habe ich an anderer Stelle sachfremd angesprochen. Da auch gleich eine Lösung mitgeliefert wird, wurde mir geraten, einen eigenen Thread aufzumachen.
Voila!
Dieser Code in user.css erzeugt automatisch Spalten und Zeilen. Je <div> eine Spalte bzw. Zeile.
.container {
display: grid;
gap: 10px 5px; /*Zeile Spalte*/
/*einzeilig*/
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
/*mehrzeilig, 3 Spalten*/
/*grid-template-columns: repeat(3, 1fr);*/
/*grid-auto-rows: minmax(100px, auto);*/
}
/*mehrzeilig, 2 Zeilen*/
.row1 {grid-row: 1;}
.row2 {grid-row: 2;}Im Code-Fenster des JCE wird dieser Code eingetragen.
<div>...</div> darf nicht leer sein. Ggf. geschütztes Leerzeichen ' ' eintragen.
HTML (einzeilig)
<div class="container">
<div><br />Spalte 1<br /><br /></div>
<div><br />Spalte 2<br /><br /></div>
...
</div>HTML (mehrzeilig)
<div class="container">
<div class="row1">Zeile1, Spalte 1<br /><br /></div>
...
<div class="row2">Zeile2, Spalte 1<br /><br /></div>
...
</div>Der Inhalt je DIV kann im Editor-Fenster des JCE - mit 'zeige Blockelemente' - wie gewohnt eingegeben werden.
Mit Chrome F12 kann man prüfen wie es um die Responsivität bestellt ist.
Quellen:
https://kulturbanause.de/blog/…ayouts-ohne-media-queries
https://developer.mozilla.org/…s/Web/CSS/CSS_Grid_Layout
https://www.w3schools.com/cssref/pr_grid.asp
vG