如何完成像这样的砖石布局？

Question

我试着弄到这样的东西：

​

​

我使用的是Bulma，目前我使用的是列和is_multiline选项。但我唯一能得到的是：

​

​

我想消除卡之间的差距，我想使用更多的柔性盒选项。它也必须对此作出反应。

​

.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

在您的情况下，我认为您应该使用make多个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>

​

Answer 2

我希望你正在寻找这个，请看下面的工作片段。

​

<link href="https://bulma.io/css/bulma-docs.min.css?v=201810132054" rel="stylesheet" />

<br>
<div class="container">
  <div class="columns is-multiline is-mobile">
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card bd-klmn">
        <div class="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>
      <div class="card bd-klmn">
        <div class="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>
      <div class="card bd-klmn">
        <div class="card-content">There are many variations of passages of Lorem Ipsum available</div>
      </div>
    </div>
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card bd-klmn">
        <div class="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>
      <div class="card bd-klmn">
        <div class="card-content">There are many variations of passages of Lorem Ipsum available</div>
      </div>
      <div class="card bd-klmn">
        <div class="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>
    </div>
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card bd-klmn">
        <div class="card-content">There are many variations of passages of Lorem Ipsum available</div>
      </div>
      <div class="card bd-klmn">
        <div class="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>
      <div class="card bd-klmn">
        <div class="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>
    </div>
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card bd-klmn">
        <div class="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>
      <div class="card bd-klmn">
        <div class="card-content">There are many variations</div>
      </div>
      <div class="card bd-klmn">
        <div class="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>
    </div>
  </div>
</div>

​

根据更新的问题要求更新答案，只需对列类进行轻微的更新，我们就完成了。

​

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" rel="stylesheet"/>
<style>
  .mb-medium { margin-bottom: 1.5rem }
</style>
<br>
<div class="container">
  <div class="columns is-multiline is-mobile">
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card mb-medium">
        <div class="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>
      <div class="card mb-medium">
        <div class="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>
      <div class="card mb-medium">
        <div class="card-content">There are many variations of passages of Lorem Ipsum available</div>
      </div>
    </div>
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card mb-medium">
        <div class="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>
      <div class="card mb-medium">
        <div class="card-content">There are many variations of passages of Lorem Ipsum available</div>
      </div>
      <div class="card mb-medium">
        <div class="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>
    </div>
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card mb-medium">
        <div class="card-content">There are many variations of passages of Lorem Ipsum available</div>
      </div>
      <div class="card mb-medium">
        <div class="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>
      <div class="card mb-medium">
        <div class="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>
    </div>
    <div class="column is-one-fifth-widescreen is-one-quarter-desktop is-one-third-tablet is-half-mobile">
      <div class="card mb-medium">
        <div class="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>
      <div class="card mb-medium">
        <div class="card-content">There are many variations</div>
      </div>
      <div class="card mb-medium">
        <div class="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>
    </div>
  </div>
</div>

​