如何解决CSS砌体列/网格布局
我有一些部分在移动设备上自然地一个接一个地流动。随着屏幕尺寸的增加，我希望能够创建一个更有趣的布局，其中一些内容并排在两列中。每列中各节的自然流不应绑定到另一列中的各节。第一列中第一部分的高度不限制/影响第二列中第一部分的高度。这是关键。
我想我可以这样说：在中等宽度的屏幕尺寸上，第1、4和5部分将进入第1列，第2、3和6部分将进入第2列。或任何订购最终以...
考虑下图，该图显示了如何在移动设备和台式机上订购这些部分。
我试图通过设置flex项目的宽度来形成列来使用flexbox容器来创建它。并使用flexbox命令重新定位各节。让项目包装以形成新行。问题是：对于行，任一列中项目的开始/结束之间都有关系。如下图所示，这会干扰布局（除非您的内容的形状/大小正确）。
使用CSS网格时，似乎会出现相同类型的问题。起初，我认为CSS网格是一个很有前途的角度，因为您可以分配多个要在同一单元格中显示的元素。但这似乎是为了在彼此上方显示内容，而不是让它们可以恢复在所述单元内的常规堆叠流程。 （尽管我还没有为这个示例创建原型。这是答案吗？）
由于它们的行/列行为，恐怕flexbox和CSS网格都无法解决问题。
一种备份是使用一些JavaScript，我可以在其中操纵DOM来将这些部分仅划分为单独的容器，并根据窗口调整大小事件对其进行排序。但是我真的很想只使用CSS来解决这个问题。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。