获取响应的三列网格以在特定断点处堆叠到两列

Question

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

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

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

具体来说，我试图让包含六边形组合div的三列在平板电脑屏幕尺寸上叠加成两列（每行2个项目）。

上次我通过将每个六边形div上应用的.work-grid类更改为宽度来轻松地实现这一目的：50％和float：在平板电脑屏幕大小的媒体查询断点下左移（仅限@media）屏幕和（最大宽度：56.25em）或@media only屏幕和（max-width：908px）例如）

例如，如此：

@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顺便说一下，如果重要的话......那真的没有完全可以说的文档）不确定它是否以不同的方式处理行，或者是否还有其他我缺失的东西，但这是使用上述代码发生的事情：< / p>

任何人都可以帮助我理解我需要做些什么才能让这些列在平板电脑大小的断点处从三列正确堆叠到两列？ （就像他们在main/current layout上所做的那样）

Answer 1

您需要删除clear和.row课程的clearfit媒体资源。像下面一样更新你的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;
 }
}