✔ Bilderübersicht + grid

[CaptainFantastic]

Hi Leute,
bin gerade dabei eine Galerieübersicht zu bauen.

<article id="" class="">

    <h5>Work - Overview</h5>

        <div class="work-wrapper">

            <section class="card">

                <a class="" href=" ">

                    <h4 class="header-tabelle">

                        Titel DEMOBILD 1

                    </h4>

                    <figure class="img-wrapper">

                        <img src="" alt="IMG">

                    </figure>

                </a>

                <p>

                    SUBTEXT 1

                    <span>SUBTEXT 2</span>

                </p>

            </section>

        

            <section>

             [...]

            </section>

        

        [...]

.work-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 10px;
  color: #444;
  margin-bottom: 2em;
}

.card {
  background-color: #fff;
  color: #111;
  border-radius: 20px;
  padding: 2px;
}

Nun möchte ich das div mit der Klasse "work-wrapper" einsparen und stattdessen dem article diese Klasse mitgeben.
Mein Problem das ich jetzt habe ist die erste Überschrift <h5> die auch ein grid wird.
Nun habe ich überlegt die pseudo-classe :not() für die Überschrift zu verwenden und da mangelt es mir an Ideen wie ich das nun mache.
Ansatzweise mit: .work-wrapper:not::first-child {} ?
Könnt ihr mir da helfen? Ich möchte nur die nötigsten tags nutzen und das div kann man sicherlich einsparen.
Danke für eure Hilfe.

C.F.

 

[Sempervivum]

Guten Abend CaptainFantastic und willkommen im Forum,
Wenn die Überschrift im Grid-Container liegen würde, könntest Du sie zwar leicht ansprechen über ihren Tagnamen h4, auch ohne first-child oder first-of-type, und Du könntest sie auch mit "span" Spalten überspannen lassen aber ich sehe keine Möglichkeit, das für die erste Zeile zu machen, wenn die Spaltenanzahl durch auto-fill variabel ist.
Auch wenn es ginge, spricht die Semantik einer Überschrift dagegen: Es macht keinen Sinn, sie in einem Grid zu einem Item zu machen.
Ich schätze den Vorteil von Grid sehr, dass man Elemente ohne Hilfscontainer anordnen kann, aber hier ist, so finde ich, eine Grenze.

 

[CaptainFantastic]

Hallo, ist es nicht so das article und section, zumindest section, eine Überschrift erfordern?
Egal. Ich brauche dort eine Überschrift das mein Bildthema umfasst. Vielleicht hasst Du es nicht richtig verstanden: Ich möchte nur meinen Demobildern (jeweils in einer section) ein grid mitgeben, nicht aber die Überschrift, die soll ausgespart werden. In etwa so:


Überschrift
+------+ +------+ +------+ +------+
--------- --------- -------- --------
--------- --------- -------- --------
+------+ +------+ +------+ +------+

Daran sitze ich gerade.

C.F.

 

[Sempervivum]

Hm, wenn ich den letzten Satz lese und mir die Grafik angucke, leistet doch das HTML und CSS aus deinem ersten Posting genau das?
Die Überschrift h5 liegt außerhalb des Grid div.work-wrapper.

 

[CaptainFantastic]

Richtig, ja. Funktionieren tut es schon. Ich habe jetzt nur den Gedanken .work-wrapper meinem article als Klasse mitzugeben und das div dann wegzumachen, weil das div unnötig wäre. Es geht mir ums verschlanken des Codes und diveritis vorzubeugen. Oder ist das div hier gerade notwendig.

C.F.

 

[Sempervivum]

Dann trifft das, was ich in meinem ersten Posting geschrieben habe, genau zu.

 

[CaptainFantastic]

Ahso, dann wäre das div also notwendig weil es keine andere Möglichkeit gäbe (ohne dem div) mit :not() die Überschrift zu umgehen. O.K.