Question 181884 in CSS Question posted in
Some basic documentation can be found here.

Css – How to align vertically multiple cards with different heights

enter image description here

Please refer above image, I tried to use flex but I can not get the result that I expected.

I’m working on tailwind css. I want to be the result like green cards in the image. Example to understand much appropriate.

Tags:

2

Answers


  1. 0

    You will need to use columns for this, in css when you use flex, flexbox, or grid there is no way to have different heights inside 1 row, but if you use seperate columns that are vertical, and set the parent of all columns to a flex element you will achieve the results.

    .parent {
  display: flex;
}
.child {
  display: block;
  width: 100%;
}

    <div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
    Login or Signup to reply.
  2. 0

    assuming your number of cards is static I made a simple demo how you can achive that easily with css grid. Here is link DEMO

    Code –

    <div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

    .container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 100px;
}

.container > div {
  padding: 1rem;
  background-color: red;
  border-radius: 1rem;
}

.container > div:nth-child(1) {
  grid-row: 1 / 6; 
}

.container > div:nth-child(2){
  grid-row: 1 / 4;
}
.container > div:nth-child(3) {
   grid-row: 4/7;
}

.container > div:nth-child(4) {
   grid-row: 1/5;
}

.container > div:nth-child(5) {
   grid-row: 1/6;
}

.container > div:nth-child(6){
  grid-row: 1 / 4;
}
.container > div:nth-child(7) {
   grid-row: 4/7;
}

.container > div:nth-child(8) {
   grid-row: 6/8;
   grid-column: 1;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search