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
sumpsi - posui - obstruxi