Html 引导还是CSS网格3列高度相等但内容溢出

我的目标是创建一个包含三列内容的容器。我不确定如何使用引导，或者CSS网格是否是正确的方法

我不想创建三列，但将一列/部分按其总高度划分为3，类似于下图，这样部分将从一列溢出到另一列

柱的顺序为：水平方向从左到右为1,2,3，垂直方向从上到下为1,2,3

---

在不使用JS的情况下，您所描述的内容必须使用CSS列

.columns{
栏目：3个；
填充：10px；
}
.栏目，
.项目{
边框：1px纯黑；
}
.项目{
边缘底部：10px；
}
.项目1{
背景色：#B8B4AD；
}
.项目2{
背景色：#D9DFE5；
}
.项目3{
背景色：#FFB83E；
}
.项目4{
背景色：#E86807；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个漫长的过程。莫利斯权杖和莫利斯权杖。Nunc非便利设施。毛里斯·廷西登酒后驾车去了。猫的最大效率。Donec tortor sem，自由女神aliquam，rutrum auctor ligula。克拉斯·维韦拉·图皮斯。埃尼安·马莱苏亚达、梅特斯·弗林蒂利亚·维库拉、塞姆·尼布·乌拉姆科珀·萨皮安、艾米特·索利西图丁·马塞德·莫里斯。一种软体动物，一种非venenatis magna laoreet rutrum的pulvinar寄主。sollicitudin馆长，leo和孕妇dapibus，事前luctus nunc，一位奥古斯·奥古斯·阿库（posuere ligula augue ac arcu）。在内克·布朗迪特·埃吉特·马萨的大教堂里。我是尤伊斯莫·埃尼姆，我是亚库利斯·迪亚姆。整型佩伦特斯克面部按摩仪。这是爱神对布朗迪特·波苏尔的爱。这是一个很好的例子。库拉比图尔是欧盟的精英。
我和我的妻子，我的妻子，我的妻子，我的妻子，我的妻子，我的妻子，我的妻子，我的妻子，我的妻子，我的妻子，我的妻子。埃尼安·ac·菲利斯·尤里古拉·乌兰科佩尔·尤里古拉·库姆。高级调味品，nec convallis tortor。前庭，前庭，前庭，前庭，前庭，前庭，前庭。
不要胡思乱想。库拉比图尔·伊库利斯·多洛和猫·康格，一位高贵的女性。杜伊斯·埃格斯塔斯·埃拉特（Duis egestas erat）在sem molestie怀孕期间。Quisque hendrerit erat vel magna mollis调味品。前庭是一个通俗的地方。Donec cursus dolor和tincidunt semper。这是一种元素。自由之路，自由之路，自由之路，自由之路。你的爱情是神圣的。埃尼安·福西布斯、普尔文纳之神、莫利斯·洛雷姆之神、弗林利亚·厄洛斯精英。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。无论是奥纳雷，还是威尼斯人的自由，无论是普罗斯人，还是智者。
我的前庭，suscipit sed的拍卖人，purus的dapibus。塞德乌特森佩尔舌。整型牛尾草。前一阶段，只是最后一个阶段，自由之间的厄洛斯·努尔，封建侵权者和欧盟成员。我们要有尊严，要有智慧，要有智慧，要有智慧。

那么，首先，这会是响应性的吗？此外，这些元素的顺序是否会根据屏幕大小而改变？或者类似于1、2、2 continued、3、3 continued、4？是的，响应性很强，会在小屏幕上重新排序为一列，从上到下的顺序为1，CSS列“必须完成”——这是一种很强的语言，我不同意。。。。我相信你也可以用——更好的说法是可以用列来完成。我如何用网格来实现这一点？谢谢你的回答，这也是响应性的吗？例如，在一个小屏幕上，我希望它缩小到一列并向下排列（1…n）？检查第二个片段，了解使用网格的方法。通过从

columns:1

开始，然后在所需断点处将其更改为

columns:3

，columns方法很容易做出响应。