0

I want to create a plans/pricing page with 3 containers. Each container holds some information, a basic example would be the Github pricing page

enter image description here

Currently my containers look like

enter image description here

and when I try to give them the same height they look like

enter image description here

As you can see they get too big now.

I created a working fiddle with CodeSandbox because I use VueJs

https://codesandbox.io/s/2x50024vl0

How can I make them as big as the biggest container?

2 Answers2

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.

Community
  • 1
  • 1
yunzen
  • 32,854
  • 11
  • 73
  • 106
  • Hey, I just checked your fiddle and it shows this for mobile screens https://cdn.discordapp.com/attachments/165027329981153280/525250486069231616/unknown.png and this for larger screens https://cdn.discordapp.com/attachments/165027329981153280/525250522375258123/unknown.png Is your link to codesandbox a wrong one? –  Dec 20 '18 at 09:59
  • @MHComputech I didn't know that codesandbox saves unsaved changes. I reverted my experiment and all is well now. – yunzen Dec 20 '18 at 10:17
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
  • 71
  • 5