ibrahimab · January 23, 2020 12:28
diff --git a/flexbox-equal-height-columns.html b/flexbox-equal-height-columns.html
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox</title>
    <style>
    .grid {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
    }
    .column {
        margin: 10px;
        padding: 10px;
        border: 1px solid red;
        display: flex;
        flex-direction: column;
    }
    .thumbnail {
        flex-grow: 1;
    }
    .caption {
        word-wrap: break-word;
        width: 342px;
    }
    </style>
 </head>
 <body>
    <div class="grid">
        <a href="" class="column">
            <div class="thumbnail"><img src="https://via.placeholder.com/350" /></div>
            <small class="caption">This is a captiond dfs dfsdfdfs dfssdf sfd fdsdfsdfsdfs fds fdsfdsfdsdfs dfsdfsdfsdfsdfsfdsdfsfdsfdsfds fdsdfssfd fsdfdfdsfdsdfs fdsdfssfdsdfsddfs fdsdfsdfsdf fsdfdsdfdfssdf dfssdffdsdfsdf dfsdfsdfsddfsdfs dfssdffdsdfs dfsdfdfsdfssdf fdsdfsdfsdfs sasads</small>
        </a>
        <a href="" class="column">
            <div class="thumbnail"><img src="https://via.placeholder.com/350" /></div>
            <small class="caption">This is a caption</small>
        </a>
        <a href="" class="column">
            <div class="thumbnail"><img src="https://via.placeholder.com/350" /></div>
            <small class="caption">This is a caption</small>
        </a>
        <a href="" class="column">
            <div class="thumbnail"><img src="https://via.placeholder.com/350" /></div>
            <small class="caption">ThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaptionThisisacaption</small>
        </a>
        <a href="" class="column">
            <div class="thumbnail"><img src="https://via.placeholder.com/350" /></div>
            <small class="caption">This is a caption</small>
        </a>
        <a href="" class="column">
            <div class="thumbnail"><img src="https://via.placeholder.com/350" /></div>
            <small class="caption">This is a caption</small>
        </a>
        <a href="" class="column">
            <div class="thumbnail"><img src="https://via.placeholder.com/350" /></div>
            <small class="caption">This is a caption</small>
        </a>
    </div>
 </body>
 </html>