More compact container with bootstrap-CodePudding

I'm using bootstrap with container-fluid. Inside the container I'm using several cards. How can I modify the container so that the cards are placed more compact in vertical direction? Currently they are placed in a grid.

CodePudding user response：

The display:grid divides into rows and columns so it is not possible to bring the card higher. You have 2 choices: switch to flex or use columns. Personally I used columns (see .columned class and .fak) and float:right for even cards and float:left for odd cards.

.columned {
  columns: 1;
  column-gap: var(--bs-gap);
  & > .card {
    break-inside: avoid;
    display: inline-flex;
    width: 100%;
    margin-bottom: var(--bs-gap);
  }
  @include media-breakpoint-up(md) {
    columns: 2;
    &.fake-masonry {
      columns: auto;
      display: block;
      & > * {
        width: calc(50% - var(--bs-gap) / 2);
        &:nth-child(even) {
          float: right;
        }
        &:nth-child(odd) {
          float: left;
          clear: left;
        }
      }
    }
  }
}

CodePudding user response：

you should be able to create a single row with 2 columns and then everything will be in one col or the other. So don't make multiple rows:

<div >
  <div >
     <div >
         <!-- everything goes here for first col -->
     </div>
     <div >
         <!-- everything goes here for second col -->
     </div>
  </div>
</div>