css - 如何修改网格模板站点中的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