[Vuejs]-Make divs as big as biggest div

by

2👍

This should help

.planContainer {
  display: flex;
  flex-direction: column;
}
.planTitle {
  flex-grow: 0;
}
.planContent {
  flex-grow: 1;
}

https://codesandbox.io/s/5m256839px

Explanation

If you inspect the #plans element it is a grid. All the grid items (.planContainer) are always of the same height, because they are on the same grid track. That’s always the case with grid items and you cannot do anything about it.
But the contents of the .planContainer are not of the same width, as they are not related to the grid items’ heights. If you use a vertical (flex-direction: column;) flex and allow the .plancontent grid item to grow (grow: 1;), you are done.

Addendum

You could then easily add a footer that has grow: 0 just as the github example.

👤yunzen

1👍

I’ve been playing around with your code and noticed you’re using grid css, so i’ll give you a grid css based answer. When i inspected your .planContainer elements, they all had the same height. However the .planContent elements did not take up the remaining space. You can fix this using:

 .planContainer {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 350px;
    }

The auto ensures that your .planTitle uses the styling you’ve already set for sizing and 1fr makes the .planContent use whatever space is remaining.

I notice your site is reactive and uses only one column when the width is 1000 or less, to get the same result at that size use:

@media only screen and (max-width: 1000px) {
#plans {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-gap: 30px;
    padding: 50px 200px;
}

grid-auto-rows is a property that defines the size of rows that you didn’t explicitly set.

Also i noticed you use percentages for setting the sizes of your grids, try using fr sometimes. Think of fr as fractions, so grid-template-columns: 1fr 1fr; makes two columns taking 50% each. You can also use different values with fr like: grid-template-columns: 2fr 1fr; which makes a column that takes 2/3 of the space and another taking the remaining 1/3.

I say this because i instinctively changed

#plans {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
  padding: 100px 250px;
  background: #ffffff;
}

to

#plans {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
  padding: 100px 250px;
  background: #ffffff;
}

when i was checking out your code, but they achieve the same thing really.

also here’s a link to the edited code https://codesandbox.io/s/r5vo8vormm

👤Stedman Dennis

Leave a comment