在某个断点将响应的三列网格堆栈到两列

Question

我正在重新构建我的站点，改变了一些东西，这一次我试图使用一些稍微不同的框架，包括不同的CSS网格系统--但我遇到了一个类似的问题，我上次构建我的站点时，让包含我的投资组合项的网格列在特定的屏幕大小/断点处正确地堆叠/折叠。

我在这里设置了一个测试页面：

http://samnorris.co.nz/test/index.html

@media only screen and (max-width: 908px) {

.work-grid {
    width: 50%;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}
}

但是使用我这次使用的不同的网格框架似乎不起作用（如果有关系的话，它是Columnal...也没有任何文档可供它讨论）。我不确定这是它以不同的方式处理行，还是我遗漏了其他东西，但使用上面的代码会发生这样的情况：

谁能帮助我理解我需要做什么来使这些列在tablet大小的断点上从三列正确地堆叠到两列？（例如，就像他们在我的主/当前布局上所做的那样）

Answer 1

您需要删除.row和ClearFit类的clear属性。更新您的CSS如下所示。

@media only screen and (max-width: 908px) {
.work-grid {
width: 50%;
float: left;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
margin-bottom: 10px;
}
.clearleft, .row
 {
   clear:none !important;
 }
}