html - 如何使用 Bulma 完成像 Google Keep 这样的砌体布局？

Question

我想得到类似的东西:

我正在使用 Bulma，目前我正在使用带有 is_multiline 选项的Columns。但我唯一能得到的是:

我想消除卡片之间的差距，我想使用更多的 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 列以上不起作用。我更新了代码段。

Answer 1

在你的情况下，我认为你应该使用列来制作多个 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>