Noch mal zum Thema alle Cards mit gleicher Höhe.
Im folgenden Beispiel, bei dem nur die Bilder und der Inhalt getauscht wurden, ist meiner Ansicht nach gut zu erkennen, dass das nicht unbedingt sinnvoll ist, wenn alle Cards gleich hoch sind. Wenn der 3. Container unterhalb der beiden anderen steht ist der Leerraum eher unschön.
Gleichzeitig ist auch ersichtlich, dass das Layout auch bei geänderten Inhalten sehr stabil ist. Das ist also grundsätzlich für viele Zwecke geeignet.
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Cardlayout mit Float</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Weiterleitung -->
<!-- <meta http-equiv="refresh" content="0; URL=name.html"> -->
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
/*Überschriften - font-family: 'Roboto Slab', Serif;*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/*Fließtext - font-family: 'Roboto', Sans-Serif";*/
@import url(https://fonts.googleapis.com/css?family=Roboto);
/*Zahlen* - font-family: 'Merriweather';*/
@import url(https://fonts.googleapis.com/css?family=Merriweather);
/*Icon-Font - font-family: 'FontAwesome';*/
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
/*Basisangaben*/
@media all {
* {
min-width: 1px;
}
body {
margin: 1rem 1rem 1rem 1rem;
}
}
/*Schriften*/
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/*darkblue*/
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
sup {
font-size: 0.75rem;
}
.zahl {
font-family: "Merriweather";
font-size: 0.75rem;
}
}
/*Grafiken*/
@media all {
figure {
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0px;
}
}
/*.buchvorstellung*/
@media all {
.buchvorstellung section {
padding: 0.5rem;
border: 1px solid grey;
margin-bottom: 1rem;
}
.buchvorstellung section>div figure {
margin-bottom: 1rem;
}
.buchvorstellung section>p {
text-align: right;
}
}
@media only screen and (min-width: 650px) {
.buchvorstellung {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
grid-auto-rows: 1fr;
}
.buchvorstellung section {
display: flex;
flex-direction: column;
}
.buchvorstellung section>div {
overflow: hidden;
margin-bottom: 1.5rem;
}
.buchvorstellung section>div figure {
float: left;
max-width: 350px;
margin-right: 1rem;
}
.buchvorstellung section>p {
margin-top: auto;
}
}
</style>
</head>
<body>
<header id="pageheader" class="pageheader">
<h1>Cardlayout mit Float</h1>
</header>
<nav id="navigation" class="navigation">
</nav>
<main id="content" class="content">
<article class="buchvorstellung">
<section>
<h1>Der kleine Däumling</h1>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Poucet5.JPG">
</figure>
<p>Der kleine Däumling ist ein Märchen, das in seiner in Europa am weitesten verbreiteten Fassung auf das Kunstmärchen Le Petit Poucet des französischen Schriftstellers Charles Perrault zurückgeht, das 1697 als Teil seiner Sammlung Märchen meiner Mutter Gans (Les Contes de ma mère l'Oye) erschien. Im 19. Jahrhundert wurde es besonders durch Adaptionen von Ludwig Bechstein und Carlo Collodi popularisiert. Der kleine Däumling steht in Bechsteins Deutsches Märchenbuch 1845 als Nr. 39, später als Nr. 34.</p>
<h2>Inhalt</h2>
<p>Ein armer Holzhacker und seine Frau haben sieben Söhne, deren jüngster bei seiner Geburt nicht größer als ein Daumen ist und der „Däumling" genannt wird. Auch in späteren Jahren wächst er kaum und spricht nicht viel, so dass er fälschlicherweise oft für dumm gehalten wird.</p>
<p>Als er gerade sieben Jahre alt ist, kommt eine Hungersnot übers Land, und die Eltern beschließen, ihre Söhne im Wald auszusetzen, da sie ihnen eine allzu große Last sind.</p>
</div>
<p>
<a class="button" href="https://de.wikipedia.org/wiki/Der_kleine_D%C3%A4umling" target="_blank">Originalartikel Wikipedia</a>
</p>
</section>
<section>
<h1>Caliban über Setebos</h1>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ed/KueheinHalbtrauer.jpg">
</figure>
<p>Caliban über Setebos ist eine Erzählung von Arno Schmidt. Sie erschien erstmals 1964 als Abschluss der zehn Erzählungen des Bandes Kühe in Halbtrauer.</p>
</div>
<p><a class="button" href="https://de.wikipedia.org/wiki/Caliban_%C3%BCber_Setebos" target="_blank">Originalartikel Wikipedia</a></p>
</section>
<section>
<h1>Die Geschichte von Sinuhe</h1>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/65/Moeller-Sinuhe-01.jpg">
</figure>
<p>Die Geschichte von Sinuhe ist ein im Original titelloses Werk der altägyptischen Literatur aus dem Anfang der 12. Dynastie des Mittleren Reichs (ca. 1900 v. Chr.).</p>
<p>Der unbekannte Autor der Dichtung schildert in Form einer Ich-Erzählung die vermutlich fiktive Lebensgeschichte des Hofbeamten Sinuhe, der nach dem Tod des Königs (Pharao) Amenemhet I. in Panik gerät und nach einer abenteuerlichen Flucht schließlich in der Region Palästina sesshaft wird.</p>
</div>
<p><a class="button" href="https://de.wikipedia.org/wiki/Die_Geschichte_von_Sinuhe" target="_blank">Originalartikel Wikipedia</a></p>
</section>
</article>
</main>
<aside class="sidebar">
</aside>
<footer id="pagefooter" class="pagefooter">
<p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/9744-text-soll-bild-umflie%C3%9Fen-responsive/">https://www.html-seminar.de/</a></p>
</footer>
</body>
</html>Wenn nur die Cards in den einzelnen Reihen gleich groß sein sollen muss im CSS nur die Zeile
Code
grid-auto-rows: 1fr;gelöscht oder auskommentiert werden. Die kommt nur einmal vor. Das kannst du ja mal ausprobieren.