Matthias Scharwies: Anordnung einiger Elemente im Grid

Beitrag lesen

SELF-Forum

Anordnung einiger Elemente im Grid

Matthias Scharwies E-Mail-Adresse des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Servus!

Wenn ich die Auflösung verändere, dann wird der Abstand zwischen den Elementen Bild und Beschreibung größer oder kleiner.

Für Abstände, Rahmen, schmale Container, ..., die sich nicht mit der Fenstergröße oder dem Zoom-Faktor ändern sollen benutze ich starre oder relativ starre Einheiten wie px oder rem.

Schau mal hier: Beispiel:CSS-grid-ausrichtung-5.html [1]

Im Beispiel beträgt der Abstand immer 2em, egal ob oben rechts oder in den .fullwidth-Zeilen unten.

Gibt es hierfür noch eine andere Möglichkeit?

Ja, du verwendest Klassen (class="").

Das Beispiel enthält auch Klassen:

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5em;
	border: thin dotted red;
}

.gallery figure {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
	margin: 0;     /* sonst großer Rand wg. Default-Stylesheet */
}

.fullwidth {
	grid-column: 1 / -1;
	border: thin dotted pink;
}

.gallery figure > img,
.gallery figure >figcaption {
	border: thin solid;
}

.gallery figure > figcaption {
	align-self: center;                  	/* oder stretch */

Wir können anhand Deiner Screenshots nicht nachvollziehen, warum das bei dir anders ist.

@Mr.Murphy

Ich biete dir mal ein Layout mittels CSS-Grid an, wie ich so ein Layout erstellen würde.


         <article>
            <div>
               <figure>
                  <img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Reese_Witherspoon_2005.jpg" alt="Laura Jeanne Reese Witherspoon">
               </figure>
               <section>
                  <p>Laura Jeanne Reese Witherspoon (* 22. März 1976 in New Orleans, Louisiana) ist eine US-amerikanische Schauspielerin, Filmproduzentin und Oscar-Preisträgerin.</p>
               </section>
            </div>
         </article>

Das ist zu viel HTML für 2-spaltiges Grid; vor allem article und section stoßen mir auf, da sie eine Überschrift benötigen. (HTML/Tutorials/Seitenstrukturierung)

Herzliche Grüße
Matthias Scharwies

--
Was ist eine Signatur?

  1. Ich hatte das Beispiel Nr5. anstelle eines veralteten Beispiels gesetzt. Nach einigem Nachdenken passt das doch ganz gut in den Artikel:
    CSS/Tutorials/Grid/Ausrichtung_von_Grid-Items. ↩︎

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln