CODEWITHSUNDEEP
cssflexboxcss-grid
Usman Shahid
Usman Shahid

Reputation: 761

How to arrange items in css grid with auto heights

I want to make a fairy simple looking layout with css grid.

enter image description here

As, shown in above image, i want to place 3 items in a grid in the exact same order as shown in the image, I don't want to set specific height to any of the item, since each of the item have different height depending upon the content in it. I want to give 70% of grid horizontal space to item1 and 30% to item2 & item3, item3 should be placed beneath item2. Again, heights of items should be auto. I am trying to achieve this for many hours but failed to do so.

Markup of the problem:

<div class="container">
  <div class="item1">some content in it...</div>
  <div class="item2">some Content in it...</div>
  <div class="item3">some Content in it...</div>
</div>

Upvotes: 1

Views: 773

Answers (1)

F. M&#252;ller
F. M&#252;ller

Reputation: 4062

Solution as requested:

You could use grid-template-areas to span the first item across multiple rows. And use a spacer at the end of the right column to make the items just as big as needed.

We can use calc to account for the grip-gap.

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: calc(70% - 10px) calc(30% - 10px);
  grid-template-areas: "item-1 item-2" "item-1 item-3" "item-1 spacer";
  border: 1px dashed #000;
  align-items: start;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
}

@media screen and (max-width: 600px) {
  .grid {
    grid-template-areas: "item-2" "item-1" "item-3";
    grid-template-columns: 100%;
  }
}

.item-1 {
  grid-area: item-1;
}

.item-2 {
  grid-area: item-2;
}

.item-3 {
  grid-area: item-3;
}

.purple {
  background-color: #5B00FF;
}

.red {
  background-color: #FF0000;
}

.pink {
  background-color: #FF00FD
}

.h-500 {
  height: 500px;
}

.h-100 {
  height: 100px;
}

.h-200 {
  height: 200px;
}
<div class="grid">
  <div class="item item-1 purple h-500">Item 1</div>
  <div class="item item-2 red h-100">Item 2</div>
  <div class="item item-3 pink h-200">Item 3</div>
</div>

Alternative solution with different columns:

You could use grid-gap along with grid-template-columns. You have to take the grid-gap into account for the width of template-column That's why there is this calc.

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: calc(70% - 10px) calc(30% - 10px);
  border: 1px dashed #000;
}

.col--right {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
}

.purple {
  background-color: #5B00FF;
}

.red {
  background-color: #FF0000;
}

.pink {
  background-color: #FF00FD
}

.h-500 {
  height: 500px;
}

.h-100 {
  height: 100px;
}

.h-200 {
  height: 200px;
}
<div class="grid">
  <div class="col col--left">
    <div class="item purple h-500">Item 1</div>
  </div>
  <div class="col col--right">
    <div class="item red h-100">Item 2</div>
    <div class="item pink h-200">Item 3</div>
  </div>
</div>

Upvotes: 2

Related Questions