如何在三列布局上的列之间创建缺口，同时保持响应速度

Question

您好社区，在此先感谢您的帮助。 我在三列布局中的列之间创建缺口时遇到问题。我试图使用column-gap参数，但它破坏了我的布局。有什么我想念的吗？

.row-blog {
  display: flex;
flex-wrap: wrap;
  padding: 0 4px;
 -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
}
.column-blog {
float: left;
    width: 33.33%;
    border: 1px solid gray;
}

.row-blog:after {
    content: "";
    display: table;
    clear: both;
}
@media screen and (max-width: 600px) {
  .row-blog {
flex-wrap: wrap;
  }
}

.column-blog img {

  vertical-align: middle;
}

<div class="row-blog">
  <div class="column-blog">
    <img src="img.jpg" alt="">
    <h2>Titre</h2>
    <p>some text</p>
  </div>
  <div class="column-blog">
    <img src="img.jpg" alt="">
    <h2>Titre</h2>
    <p>some text</p>
  </div>
  <div class="column-blog">
    <img src="img.jpg" alt="">
    <h2>Titre</h2>
    <p>some text</p>
  </div>
</div>