Как применить сетку к элементам карты, не разрушая вертикальное выравнивание в уменьшении размера браузера?

Question

Я наткнулся на эту карточку UI http://codepen.io/mkurapov/pen/qNQXxz, которая отображает три карты, и если вы делаете браузер меньше, он переназначает карты вертикальной линией.

HTML:

<div class="wrap"> 
<div class="tile"> 
    <img src='https://images.unsplash.com/photo-1464054313797-e27fb58e90a9?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=996&q=80'/> 
    <div class="text"> 
    <h1>Lorem ipsum.</h1> 
    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2> 
    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p> 
<div class="dots"> 
    <span></span> 
    <span></span> 
    <span></span> 
    </div> 
    </div> 
</div> 


<div class="tile"> 
    <img src='https://images.unsplash.com/photo-1458668383970-8ddd3927deed?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1004&q=80'/> 
    <div class="text"> 
    <h1>Lorem ipsum.</h1> 
    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2> 
    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p> 
<div class="dots"> 
    <span></span> 
    <span></span> 
    <span></span> 
    </div> 
    </div> 
</div> 

    <div class="tile"> 
    <img src='https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80'/> 
    <div class="text"> 
    <h1>Lorem ipsum.</h1> 
    <h2 class="animate-text">More lorem ipsum bacon ipsum.</h2> 
    <p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p> 
<div class="dots"> 
    <span></span> 
    <span></span> 
    <span></span> 
    </div> 
    </div> 
</div> 
</div> 


</div> 

CSS:

body 
{ 
    background-color:#eee 
} 
.wrap 
{ 
    margin:50px auto 0 auto; 
    width:100%; 
    display:flex; 
    align-items:space-around; 
    max-width:1200px; 
} 
.tile 
{ 
    width:380px; 
    height:380px; 
    margin:10px; 
    background-color:#99aeff; 
    display:inline-block; 
    background-size:cover; 
    position:relative; 
    cursor:pointer; 
    transition: all 0.4s ease-out; 
    box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44); 
    overflow:hidden; 
    color:white; 
    font-family:'Roboto'; 

} 
.tile img 
{ 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
    transition: all 0.4s ease-out; 
} 
.tile .text 
{ 
/* z-index:99; */ 
    position:absolute; 
    padding:30px; 
    height:calc(100% - 60px); 
} 
.tile h1 
{ 

    font-weight:300; 
    margin:0; 
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3); 
} 
.tile h2 
{ 
    font-weight:100; 
    margin:20px 0 0 0; 
    font-style:italic; 
    transform: translateX(200px); 
} 
.tile p 
{ 
    font-weight:300; 
    margin:20px 0 0 0; 
    line-height: 25px; 
/* opacity:0; */ 
    transform: translateX(-200px); 
    transition-delay: 0.2s; 
} 
.animate-text 
{ 
    opacity:0; 
    transition: all 0.6s ease-in-out; 
} 
.tile:hover 
{ 
/* background-color:#99aeff; */ 
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64); 
    transform:scale(1.05); 
} 
.tile:hover img 
{ 
    opacity: 0.2; 
} 
.tile:hover .animate-text 
{ 
    transform:translateX(0); 
    opacity:1; 
} 
.dots 
{ 
    position:absolute; 
    bottom:20px; 
    right:30px; 
    margin: 0 auto; 
    width:30px; 
    height:30px; 
    color:currentColor; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content:space-around; 

} 

.dots span 
{ 
    width: 5px; 
    height:5px; 
    background-color: currentColor; 
    border-radius: 50%; 
    display:block; 
    opacity:0; 
    transition: transform 0.4s ease-out, opacity 0.5s ease; 
    transform: translateY(30px); 

} 

.tile:hover span 
{ 
    opacity:1; 
    transform:translateY(0px); 
} 

.dots span:nth-child(1) 
{ 
    transition-delay: 0.05s; 
} 
.dots span:nth-child(2) 
{ 
    transition-delay: 0.1s; 
} 
.dots span:nth-child(3) 
{ 
    transition-delay: 0.15s; 
} 


@media (max-width: 1000px) { 
    .wrap { 
    flex-direction: column; 
    width:400px; 
    } 
} 

Я заинтересован в получении информации о том, как добавить больше карт из первых трех, однако, если вы добавить больше карт в коде smushes карты и больше не сохраняет свой квадратный дизайн.

Мне любопытно, как вы можете добавить сетку, не теряя вертикальное выравнивание при уменьшении размера веб-браузера?

Answer 1

Все, что вам нужно сделать, это добавить правило обертывание:

.wrap 
{ 
    margin:50px auto 0 auto; 
    width:100%; 
    display:flex; 
    align-items:space-around; 
    max-width:1200px; 
    flex-wrap: wrap; <-- boop 
} 

https://codepen.io/anon/pen/vgxBQK