flexbox und/oder grid?

[Tanya]

Hi,
Kann man grids und flexboxes "mischen", d.h. z.B. flexboxes innerhalb von grids?
Und nun konkret.
Je nach Eingabe in einem Formular soll die Ergebnisseite unterschiedliche Überschriften haben.
Zum einen 4-10 stellige Nummer linksbündig, daneben getrennt durch ein Space ein Text zum anderen nur der Text.
Der Fall eins (mit grid) findet sich https://jsfiddle.net/w406tpa3/
Wenn nun statt
<p>12345</p> ein leeres <p></p> vorhanden ist, steht der Text zwar (fast) links. Wie bekomme ich aber das gap weg?

[Rolf B]

Hallo Tanya,

Kann man grids und flexboxes "mischen",

Ja. Für jede Box kannst Du ein individuelles Layoutmodell definieren.

Wie bekomme ich aber das gap weg?

Du hast in deinem Fiddle ein <article> Element verwendet. Das ist keine Überschrift. Deswegen habe ich leichte Zuordnungsprobleme. Du möchtest, dass das, was in <article> steht, die Überschrift darstellt?

Du solltest vielleicht ein <h2> Element (oder eine andere passende Stufe) bzw. ein <header> Element in Erwägung ziehen.

Meine Einschätzung ist, dass Du das gap mit CSS Mitteln nicht wegbekommst. Nicht abhängig von der Bedingung "ist im ersten p was drin oder nicht". Sobald das leere <p> davor steht, hast Du ein HTML Element im DOM und damit auch ein Gap.

Ich denke, da musst Du an die Generierung dieses Inhalts ran. Wenn Du nur ein Element im Kopf darstellen willst, solltest Du auch nur eins hineinsetzen. ODER du musst das leere <p> verstecken (hidden-Attribut). Wie erstellst Du das HTML im Moment?

Für ein prinzipiell einzeiliges Layoutelement ist Grid - meine ich - auch nicht unbedingt erforderlich. Natürlich kann man sich auf den Standpunkt stellen, dass grid das neue flex ist, aber grid ist wegen seiner Leistungsfähigkeit auch das komplexere Tool.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Meine Einschätzung ist, dass Du das gap mit CSS Mitteln nicht wegbekommst.

Deine Einschätzung teile ich nicht.

Hold my beer. Kein Grid- oder Flexbox-Container; article > p { display: inline }

Ich denke, da musst Du an die Generierung dieses Inhalts ran.

Ja, aber nicht wegen dem Styling, sondern weil das Markup (vermutlich) unpassend ist.

😷 LLAP

[Rolf B]

Hallo Gunnar,

ok, das Whitespace vor dem ersten Nonwhitespace verschwindet generell.

Solange tatsächlich nur genau ein Space gebraucht wird, passt das.

Warum display:inline für p? Könnte man nicht auch gleich auf span wechseln?

Oder - Tanya - brauchst Du eine Einrahmung von Nummer und Text in ein Element überhaupt? "Linksbünding", "ein Space" - das ist doch Fließtxt. Hast Du noch andere Anforderungen an das Layout?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Warum display:inline für p?

Um dich zu widerlegen, dass man wegen des Stylings ans Markup ran müsste.

Könnte man nicht auch gleich auf span wechseln?

Sag ich doch …

Oder - Tanya - brauchst Du eine Einrahmung von Nummer und Text in ein Element überhaupt?

Ohne ginge es natürlich auch.

😷 LLAP

[Gunnar Bittersmann]

@@Tanya

Kann man grids und flexboxes "mischen", d.h. z.B. flexboxes innerhalb von grids?

Ja, sowohl Grid in Flexbox als auch Flexbox in Grid. Oder Grid in Grid. Oder Flexbox in Flexbox.

Je nach Eingabe in einem Formular soll die Ergebnisseite unterschiedliche Überschriften haben.
[…] Der Fall eins (mit grid) findet sich https://jsfiddle.net/w406tpa3/

Da ist keine Überschrift. article sollte aber eine haben.

Oder es sollte gar kein article-Element verwendet werden – das steht nicht für „Artikel“ im Sinne von „Produkt“. Worum geht es da bei dir?

Wenn nun statt
<p>12345</p> ein leeres <p></p> vorhanden ist, steht der Text zwar (fast) links. Wie bekomme ich aber das gap weg?

Dazu brauchst du weder Grid nosh Flexbox. Beispiel mit span statt p (und h2, falls es sich denn um eine Überschrift 2. Ordnung handelt).

😷 LLAP