如何使用CSS制作具有固定列的自动调整块

Question

对于我的 Todo 应用程序，我想显示自动调整的块，如 Google Keep 。

我查看了这篇文章How to accomplish something like Google Keep layout。它适用于图像，但不适用于与块耦合的文本内容（例如：<div>）。但它并没有帮助我。

.container{
 
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: .5rem; /* Chrome, Safari, Opera */
  -moz-column-gap: .5rem; /* Firefox */
  column-gap: 0.5rem;
}
div div:not(:first-child){
  margin:10px 0;
}

<div class="container">
  <div style="background:#3ff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae dignissim tellus. Curabitur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Aenean rutrum fringilla augue at dignissim.</div>
  <div style="background:#aff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae dignissim tellus. Curabitur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Aenean rutrum fringilla augue at dignissim.</div>
  <div  style="background:#2fe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae dignissim tellus. Curabitur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Atur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Atur ac posuere sapien, id vehicula diam. Sed nibh odio, interdum consectetur sagittis at, blandit vel est. Ut sem massa, laoreet condimentum vestibulum in, accumsan eget nulla. Sed eu euismod eros. Morbi molestie vel mi a imperdiet. Vestibulum hendrerit sapien sed mauris feugiat gravida. Aenean rutrum fringilla augue at dignissim.</div>
  <div style="background:#a9e">Hi My content is Aenean rutrum fringilla augue at dignissim.Aenean rutrum fringilla augue at dignissim.</div>
  <div style="background:#ae9">content</div>
  
</div>

我希望每个块都显示为一个新块而不是另一个块的延续。它也应该容纳顶部空间（包括新行）。

我不想使用任何第三方捆绑包。