代码之家 › 专栏 › 技术社区 › Husna

使用CSS的砌石布局

masonry html5 css jquery

Husna · 技术社区 · 6 年前

我正在使用CSS中的 column count 这里我得到了砖石结构的布局,但我的问题是当我添加内容时,第二列的DIV根据内容的高度划分为第二列的半DIV移动到第1列,第二列的半DIV移动到第2列。我的问题是,我应该如何使用CSS实现这种砖石布局。


   
    
    
    
     
      container{
宽度:70%;
边距:0自动;
背景色:红色;
}

.cols{
-moz列计数:3;
-Moz柱间隙:3%;
-Moz列宽:30%;
-WebKit列计数:3;
-Webkit列间隙:3%;
-WebKit列宽:30%;
列数:3;
柱距:3%;
列宽:30%;
}

框{
页底:20px;
}

.框.1{
高度:自动;
背景色:D77575;
}

.框2{
高度:自动;
背景色:DCBC4c;
}

.框3{
背景色:A3CA3b;
高度:自动;
}

.框4{
背景色:3DAE3;
高度:自动;
}

.方框5{
背景色:bb8ed8;
高度:自动;
}

.第6栏{
背景色:Baafb1;
高度:自动;
}

文章.后布局{
盒影:0 0px 7px 0 rgba(75、122、175、0.33);
}

.图像{
宽度:100%;
高度:自动;
}

IMG{
宽度:100%;
高度:自动;
}

P{
填料:40px 20px;
}<DIV class=“Box One”>
<article class=“后置布局”>
<DIV class=“image”>
<img src=“https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?”auto=compress&cs=tinysrgb&h=350“>
</DIV>
&Leo Vulputate的lvivamus的lt;P>Vivamus,Eleifend Elite NEC,Porta Libero。金红石,葡萄园,葡萄园。可溶性蛋白的含量。在Leo Vulputate,Eleifend Elite NEC,Porta Libero的生命体征。Nullam Rutrum扫描电镜
Vitae Placerat Porttitor。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。利欧·瓦卢普塔特、埃利芬·埃利特·内克、自由门的鲁特夫妇。Nullam Rutrum Sem Vitae Placerat公司
波特提托。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。独立自主。怀疑AC马萨维尔泰卢斯Convair。金红梅Vitae Placerat
波特提托。可溶性蛋白的含量。怀疑是因为他让威尼斯人和萨皮恩人感到恐惧。Enim__</P>中的Fusce
</Article>
</DIV>
<div class=“box two”>
<article class=“后置布局”>
<DIV class=“image”>
<img src=“https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?”auto=compress&cs=tinysrgb&h=350“>
</DIV>
&Leo Vulputate的lvivamus的lt;P>Vivamus,Eleifend Elite NEC,Porta Libero。金红石,葡萄园,葡萄园。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。努拉姆
金红梅维塔砂仁。可溶性蛋白的含量。怀疑是因为他让威尼斯人和萨皮恩人感到恐惧。Enim__</P>中的Fusce
</Article>
</DIV>
<DIV class=“Box One”>
<article class=“后置布局”>
<DIV class=“image”>
<img src=“https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?”auto=compress&cs=tinysrgb&h=350“>
</DIV>
&Leo Vulputate的lvivamus的lt;P>Vivamus,Eleifend Elite NEC,Porta Libero。金红石,葡萄园,葡萄园。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。努拉姆
金红梅维塔砂仁。可溶性蛋白的含量。怀疑是因为他让威尼斯人和萨皮恩人感到恐惧。Enim__</P>中的Fusce
</Article>
</DIV>
<div class=“box three”>
<article class=“后置布局”>
<DIV class=“image”>
<img src=“https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?”auto=compress&cs=tinysrgb&h=350“>
</DIV>
&Leo Vulputate的lvivamus的lt;P>Vivamus,Eleifend Elite NEC,Porta Libero。金红石,葡萄园,葡萄园。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。努拉姆
金红梅维塔砂仁。可溶性蛋白的含量。怀疑是因为他让威尼斯人和萨皮恩人感到恐惧。Enim__</P>中的Fusce
</Article>
</DIV>
<div class=“box two”>
<article class=“后置布局”>
<DIV class=“image”>
<img src=“https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?”auto=compress&cs=tinysrgb&h=350“>
</DIV>
&Leo Vulputate的lvivamus的lt;P>Vivamus,Eleifend Elite NEC,Porta Libero。金红石,葡萄园,葡萄园。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。努拉姆
金红梅维塔砂仁。可溶性蛋白的含量。怀疑是因为他让威尼斯人和萨皮恩人感到恐惧。Enim__</P>中的Fusce
</Article>
</DIV>
<DIV class=“Box Five”>
<article class=“后置布局”>
<DIV class=“image”>
<img src=“https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?”auto=compress&cs=tinysrgb&h=350“>
</DIV>
&Leo Vulputate的lvivamus的lt;P>Vivamus,Eleifend Elite NEC,Porta Libero。金红石,葡萄园,葡萄园。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。努拉姆
金红梅维塔砂仁。可溶性蛋白的含量。怀疑是因为他让威尼斯人和萨皮恩人感到恐惧。Enim__</P>中的Fusce
</Article>
</DIV>
<DIV class=“Box One”>
<article class=“后置布局”>
<DIV class=“image”>
<img src=“https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?”auto=compress&cs=tinysrgb&h=350“>
</DIV>
&Leo Vulputate的lvivamus的lt;P>Vivamus,Eleifend Elite NEC,Porta Libero。金红石,葡萄园,葡萄园。可溶性蛋白的含量。可溶性维生素E。怀疑AC马萨维尔泰卢斯Convair。努拉姆




#container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}
<div id="container" class="cols">
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box five">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box six">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
</div>

1 回复 | 直到 6 年前

Aravind S 6 年前

break-inside: avoid; here

#container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
box-sizing: border-box;
-webkit-column-break-inside: avoid;
break-inside: avoid;
counter-increment: item-counter;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}

<div id="container" class="cols">
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box five">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box six">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enimâ¦</p>
    </article>
  </div>
</div>