我正在尝试获得类似的东西：
我正在使用布尔玛，目前正在使用带有is_multiline选项的列。但是我唯一能得到的就是：
我想消除卡之间的间隙，我想使用更多的flexbox选项。它也必须响应。
.card-columns {
column-count: 1;
column-gap: 1.5rem;
padding: 1.5rem;
}
.card-columns .card {
display: inline-block;
width: 100%;
margin-bottom: 1.5rem;
}
.columns-6 {
column-count: 6;
}
.columns-5 {
column-count: 5;
}
.columns-4 {
column-count: 4;
}
.columns-3 {
column-count: 3;
}
.columns-2 {
column-count: 2;
}
.columns-1 {
column-count: 1;
}
@media (max-width: 768px) {
.columns-6-mobile {
column-count: 6;
}
.columns-5-mobile {
column-count: 5;
}
.columns-4-mobile {
column-count: 4;
}
.columns-3-mobile {
column-count: 3;
}
.columns-2-mobile {
column-count: 2;
}
.columns-1-mobile {
column-count: 1;
}
}
@media (min-width: 769px) {
.columns-6-tablet {
column-count: 6;
}
.columns-5-tablet {
column-count: 5;
}
.columns-4-tablet {
column-count: 4;
}
.columns-3-tablet {
column-count: 3;
}
.columns-2-tablet {
column-count: 2;
}
.columns-1-tablet {
column-count: 1;
}
}
@media (min-width: 1024px) {
.columns-6-desktop {
column-count: 6;
}
.columns-5-desktop {
column-count: 5;
}
.columns-4-desktop {
column-count: 4;
}
.columns-3-desktop {
column-count: 3;
}
.columns-2-desktop {
column-count: 2;
}
.columns-1-desktop {
column-count: 1;
}
}
@media (min-width: 1216px) {
.columns-6-widescreen {
column-count: 6;
}
.columns-5-widescreen {
column-count: 5;
}
.columns-4-widescreen {
column-count: 4;
}
.columns-3-widescreen {
column-count: 3;
}
.columns-2-widescreen {
column-count: 2;
}
.columns-1-widescreen {
column-count: 1;
}
}
@media (min-width: 1408px) {
.columns-6-fullhd {
column-count: 6;
}
.columns-5-fullhd {
column-count: 5;
}
.columns-4-fullhd {
column-count: 4;
}
.columns-3-fullhd {
column-count: 3;
}
.columns-2-fullhd {
column-count: 2;
}
.columns-1-fullhd {
column-count: 1;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet"/>
<div class="card-columns columns-6-fullhd columns-5-widescreen columns-4-desktop columns-3-tablet columns-2-mobile">
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
</div>编辑：我尝试下的解决方案之一，它不工作以上4列。我更新了代码段。
最佳答案
在您的情况下，我认为您应该使用一列使多个CSS类，并在媒体的帮助下，您可以根据需要设置列号，请尝试以下解决方案，希望它会有所帮助：
.card-columns {
column-count: 1;
column-gap: 1.5rem;
padding: 1.5rem;
}
.card-columns .card {
display: inline-block;
width: 100%;
margin-bottom: 1.5rem;
}
.columns-6 {
column-count: 6;
}
.columns-5 {
column-count: 5;
}
.columns-4 {
column-count: 4;
}
.columns-3 {
column-count: 3;
}
.columns-2 {
column-count: 2;
}
.columns-1 {
column-count: 1;
}
@media (min-width: 576px) {
.columns-6-sm {
column-count: 6;
}
.columns-5-sm {
column-count: 5;
}
.columns-4-sm {
column-count: 4;
}
.columns-3-sm {
column-count: 3;
}
.columns-2-sm {
column-count: 2;
}
.columns-1-sm {
column-count: 1;
}
}
@media (min-width: 768px) {
.columns-6-md {
column-count: 6;
}
.columns-5-md {
column-count: 5;
}
.columns-4-md {
column-count: 4;
}
.columns-3-md {
column-count: 3;
}
.columns-2-md {
column-count: 2;
}
.columns-1-md {
column-count: 1;
}
}
@media (min-width: 992px) {
.columns-6-lg {
column-count: 6;
}
.columns-5-lg {
column-count: 5;
}
.columns-4-lg {
column-count: 4;
}
.columns-3-lg {
column-count: 3;
}
.columns-2-lg {
column-count: 2;
}
.columns-1-lg {
column-count: 1;
}
}
@media (min-width: 1200px) {
.columns-6-xl {
column-count: 6;
}
.columns-5-xl {
column-count: 5;
}
.columns-4-xl {
column-count: 4;
}
.columns-3-xl {
column-count: 3;
}
.columns-2-xl {
column-count: 2;
}
.columns-1-xl {
column-count: 1;
}
}<link href="https://bulma.io/css/bulma-docs.min.css?v=201810132054" rel="stylesheet" />
<div class="card-columns columns-6-xl columns-5-lg columns-4-md columns-3-sm ">
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div class="card card-content">There are many variations of passages of Lorem Ipsum available</div>
<div class="card card-content">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
<div class="card card-content">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
</div>关于html - 如何完成Bulma等Google Keep的砌体布局？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52795558/