Как сделать макет кладки, как Google Keep с Bulma?

Question

Я пытаюсь получить что-то вроде:

Я использую Bulma и в настоящее время я использую Столбцы с параметром 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 столбцами.Я обновил фрагмент.

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>

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>