在css中的元素之间线程化，就像在发布软件中一样

Question

有没有任何方法可以通过纯css创建这样的布局，可以通过flex box、css网格或除JS:之外的任何东西

+--------------------------+ +---------------+  
|                          | | sidebar       |  
|                          | | container     |  
|                          | | with border   |  
|                          | | +-----------+ |  
|                          | | |sidebar    | |  
|                          | | |card #1    | |  
|                          | | |           | |  
|                          | | |           | |  
|    main content          | | +-----------+ |  
|    of various            | | +-----------+ |  
|    height                | | |sidebar    | |  
|                          | | |card #2    | |  
|                          | | |           | |  
|                          | | |           | |  
|                          | | +-----------+ |  
|                          | | +-----------+ |  
|                          | | |sidebar    | |  
|                          | | |card #3    | |  
|                          | | |           | |  
|                          | | |           | |  
|                          | | +-----------+ |  
|                          | +---------------+  
|                          | not enough space   
|                          | for one more card  
+--------------------------+                    
+--------------------------------------------+  
|  "sidebar" continues here, with border and |  
|  this header                               |  
|  +-----------+ +-----------++-----------+  |  
|  |sidebar    | |sidebar    ||sidebar    |  |  
|  |card #4    | |card #5    ||card #6    |  |  
|  |           | |           ||           |  |  
|  |           | |           ||           |  |  
|  +-----------+ +-----------++-----------+  |  
|  +-----------+ +-----------+               |  
|  |sidebar    | |sidebar    |               |  
|  |card #7    | |card #n    |               |  
|  |           | |           |               |  
|  |           | |           |               |  
|  +-----------+ +-----------+               |  
|                                            |  
+--------------------------------------------+  

所以围绕主要内容的卡片首先从右边弯曲，然后从底部弯曲，如果主要内容有不同的高度，整个难度就是右边的"真实"侧边栏，应该包含最大数量的卡片，但其高度应该小于内容容器。

Answer 1

我尝试用一种简单的方式来制作你的布局，使用有限的普通CSS。网格是响应性的，我试图使名称在某种程度上遵循Bootstrap指南。

.col {
position: relative;
float: left;
color: white;
}
.col-9 {
width: 75%;
}
.main {
min-height: 200px;
background-color: red;
}
.col-12 {
width: 100%;
background-color: red;
}
.sidebar .col-12 {
width: 100%;
background-color: green;
}
.col-3 {
width: 25%;
background-color: green;
}
.col-4 {
width: 33%;
background-color: blue;
}

<div class="main col col-9">
<div class="col-12">main</div>
</div>
<div class="sidebar col col-3">
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
<div class="col col-12">sidebar</div>
</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>
<div class="col col-4">sidebar</div>

工作小提琴示例