JSFiddle - React, Tailwind, and code Playground
by basti1012
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<style>
#wrapper {
max-width: 600px;
width: 100%;
display: flex;
flex-wrap: wrap;
margin: auto;
}
figure {
margin: 0.5em;
flex-basis: calc(33% - 1em);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
figure img {
width: 100%;
height: auto;
min-height: 1px;
}
figure a {
min-height: 1px;
}
figure figcaption {
text-align: center;
}
</style>
<div id="wrapper">
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (1).jpg" alt="bild2" />
<figcaption>
Text Bild 1
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (2).jpg" alt="bild2" />
<figcaption>
Text Bild 2
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (3).jpg" alt="bild1" />
<figcaption>
Text Bild 3
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (4).jpg" alt="bild1" />
<figcaption>
Text Bild 4
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (5).jpg" alt="bild1" />
<figcaption>
Text Bild 5
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (7).jpg" alt="bild1" />
<figcaption>
Text Bild 6
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (8).jpg" alt="bild1" />
<figcaption>
Text Bild 7
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (9).jpg" alt="bild1" />
<figcaption>
Text Bild 8
</figcaption>
</figure>
<figure>
<img class="bild" src="http://lupus.bplaced.net/fotos/t (10).jpg" alt="bild1" />
<figcaption>
Text Bild 9
</figcaption>
</figure>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"...