地铁网格样式

Question

我试图实现类似下面的页面： https://undsgn.com/uncode/homepages/blog-metro/

我已经尝试过，并能来尽可能接近这样的：https://jsfiddle.net/futu7t1c/

但我怎么能得到那些2 small-thumbs在底部向上移动？

顺序为大，小，小，大，小，小

<div id="blog-posts"> 
<div class="grid big-thumb"> 
    Title 
</div> 
<div class="grid small-thumb"> 
    Title 
</div> 
<div class="grid small-thumb"> 
    Title 
</div> 
<div class="grid big-thumb"> 
    Title 
</div> 
<div class="grid small-thumb"> 
    Title 
</div> 
<div class="grid small-thumb"> 
    Title 
</div> 
</div> 

CSS

#blog-posts { 
     -moz-column-count: 1; 
     -webkit-column-count: 1; 
     column-count: 1; 
     -moz-column-gap: 0em; 
     -webkit-column-gap: 0em; 
     column-gap: 0em; 
    } 

    .grid { 
     background: #eee; 
     float: left; 
     position: relative; 
     color: #fff; 
    } 

    .big-thumb { 
     width: 50%; 
     height: 600px; 
     background: #aeaeae; 
    } 

    .small-thumb { 
     width: 25%; 
     height: 300px; 
     background: #353535; 
    } 

Answer 1

待复制的网格，就可以使具有弹性的孩子，也是柔性行弯曲列保存您的图像。

.flex { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
    flex: 0 0 50%; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    vertical-align: top; 
 
}

<div class="flex row"> 
 
    <div class="flex col"> 
 
    <div class="big"> 
 
     <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg"> 
 
    </div> 
 
    <div class="flex row"> 
 
     <div class="small"> 
 
     <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
     </div> 
 
     <div class="small"> 
 
     <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="flex col"> 
 
    <div class="flex row"> 
 
     <div class="small"> 
 
     <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
     </div> 
 
     <div class="small"> 
 
     <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
     </div> 
 
    </div> 
 
    <div class="big"> 
 
     <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg"> 
 
    </div> 
 
    </div>

嗯，这是你如何使用常规的醇” HTML/CSS做。但是，因为你只想有一大堆的元素是automatagically铺陈这样，使用masonry

$('.masonry').masonry({ 
 
    itemSelector: '.item', 
 
    columnWidth: '.small' 
 
});

body { 
 
    margin: 0; 
 
} 
 
.item { 
 
    float: left; 
 
} 
 
.big { 
 
    width: 50%; 
 
} 
 
.small { 
 
    width: 25%; 
 
} 
 
img { 
 
    width: 100%; 
 
    vertical-align: top; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
 
<div class="masonry"> 
 
    <div class="item big"> 
 
    <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg"> 
 
    </div> 
 
    <div class="item small"> 
 
    <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
    </div> 
 
    <div class="item small"> 
 
    <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
    </div> 
 

 
    <div class="item big"> 
 
    <img src="http://1.bp.blogspot.com/-hNC-oT6f-fY/TeXxO26yjvI/AAAAAAAAAOY/qfkOqdKkBi8/s1600/platon-photographer-putin-man-of-the-year-portrait.jpg"> 
 
    </div> 
 
    <div class="item small"> 
 
    <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
    </div> 
 
    <div class="item small"> 
 
    <img src="https://i.stack.imgur.com/2C22p.jpg"> 
 
    </div> 
 
</div>