让响应式三列网格在某个断点处堆叠到两列

Question

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

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

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

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

上次我通过将应用于每个六边形 div 的 .work-grid 类更改为 from to width: 50% 和 float: left under a tablet screen-size media query breakpoint (@media only screen and (max-width: 56.25em) or @media only screen and (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顺便说一句，如果重要的话......根本没有任何文档可以说要么）不确定它是否以不同的方式处理行，或者是否只是我缺少其他东西，但这就是使用上面的代码发生的事情：

谁能帮我理解我需要做些什么才能让这些列在平板电脑大小的断点处从三列正确堆叠到两列？ （例如他们在我的main/current layout 上所做的）

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;
 }
}