将div（通过php数据库获取）彼此相邻，并且当行在彼此之下充满时

Question

I have a new project where I want to get items out of a database and into a nice website. I now have this http://manage.wordquest.nl/ (image down below) which looks weird. The different divs/tabs are being put next to each other, but they are not put directly below each other. I want them to be next to each other, and when the row is full, they should be placed directly under each other. Not with a lot of distance below them.

Answer 1

I think it is your sugar:

<div class="masonry">
  <div class="item">
    <div class="item__content">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--small">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--medium">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--small">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--medium">
    </div>
  </div>
  <div class="item">
    <div class="item__content">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--large">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--medium">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--small">
    </div>
  </div>
  <div class="item">
    <div class="item__content">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--large">
    </div>
  </div>
  <div class="item">
    <div class="item__content">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--small">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--large">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--medium">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--small">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--medium">
    </div>
  </div>
  <div class="item">
    <div class="item__content">
    </div>
  </div>
  <div class="item">
    <div class="item__content item__content--small">
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=PT+Mono');

$bg: #4F000B;
$itemBg1: #720026;
$itemBg2: #CE4257;
$itemBg3: #FFC093;
$itemBg4: #FF7F51;
$counterBg: #222;

@mixin setColorAndHover($baseColor) {
  color: $baseColor;
  &:hover {
    background: lighten($baseColor, 8%);
  }
}

body,
html {
  position: relative;
  width: 100%;
  height: 100%;
  background: $bg;
  font-family: "PT Mono", monospace;
}

.masonry {
  column-count: 1;
  column-gap: 0;
  counter-reset: item-counter;

  @media screen and (min-width: 400px) {
    column-count: 2;
  }

  @media screen and (min-width: 600px) {
    column-count: 3;
  }

  @media screen and (min-width: 800px) {
    column-count: 4;
  }

  @media screen and (min-width: 1100px) {
    column-count: 5;
  }
}

.item {
  box-sizing: border-box;
  break-inside: avoid;
  padding: 10px;
  counter-increment: item-counter;

  &__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 220px;
    font-size: 40px;
    color: darken($bg, 5%);
    background: currentColor;
    box-sizing: border-box;
    @include setColorAndHover($itemBg1);

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 13px;
      width: 2em;
      height: 2em;
      line-height: 2em;
      text-align: center;
      font-weight: bold;
      background-color: $counterBg;
      content: counter(item-counter);
    }

    &:after {
      color: darken($bg, 10%);
      content: 'ಠ‿ಠ';
    }

    &--small {
      @include setColorAndHover($itemBg2);
      height: 100px;

      &:after {
        content: '♥◡♥';
      }
    }

    &--medium {
      @include setColorAndHover($itemBg3);
      height: 175px;

      &:after {
        content: '◔ᴗ◔';
      }
    }

    &--large {
      @include setColorAndHover($itemBg4);
      height: 280px;

      &:after {
        content: 'ಠ_๏';
      }
    }
  }
}

online demo https://codepen.io/airen/pen/ybyvEM