html - 获取响应式三列网格以在特定断点处堆叠为两列

Question

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

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

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

具体来说，我试图让包含六边形投资组合 div 的三列以平板电脑屏幕大小堆叠成两列(每行 2 项)。

上次我通过将应用于每个六边形 div 的 .work-grid 类更改为 from 到 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) example)

例如:

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