如何在网格模板站点中修改div？

Question

在我工作的时候，他们给了我一个工作模板，我相信我的老板是在什么地方买的。但是现在客户想要修改模板，所以我必须找出模板是如何工作的。

到目前为止，我发现它使用的是12网格模型。糟糕的是我不知道是inui.css还是别的什么。我在调整网格时遇到了麻烦，并且没有关于想要做的线索。

我不知道我想要做的是不是可能的，或者是非常明显的，我实际上是一个php实习生，很难弄清楚css。

这就是问题：

original http://img46.imageshack.us/img46/4746/originalog.jpg

这就是我想做的：

wanted http://img42.imageshack.us/img42/225/wantedqc.jpg

代码是：

<div class="grid-6">
   image here
</div>
<div class="grid-6">
   image here
</div>
<div class="grid-6">
   image here
</div>
<div class="grid-6">
   text here
</div>

哦，诀窍是，客户不希望它在最上面的div下面，只是稍微高一点。

编辑

这是模板中的css

.grid-6, .grid-half {
width: 47.917%;
}

.grids {
width: auto;
max-width: 1000px;
margin: 0px 0px 0px -1.7% !important;
list-style: none;
overflow: hidden;
letter-spacing: -.25em;
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}

.grids [class*="grid-"]
{
display: inline-block;
margin: 0px 0px 0px 1.7% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
letter-spacing: 0;
padding: 0px 10px 10px 10px;
}

Answer 1

对于纯CSS，实现这一点的唯一方法是使用Multiple Column Module。

http://cssdeck.com/labs/qi1g3b4e

.foo {
  columns: 2;
}

可能需要前缀：http://caniuse.com/#feat=multicolumn