How to make the height of all the cards similar?

[piyush97]

The height of every card is different.

Is there any way I can make all them of same height?

Thanks in advance

[einazare]

Hello again @piyush97 ,

There are multiple ways of achieving the desired effect:

1. Make all of the cards content equal (meaning to you have to have the same amount of text in each card - this way, they'll all be the same height)
2. Put the property height: -webkit-fill-available; on the Card element - i've only made some small tests and not sure how good this is
3. Put a property of defined height, something like: height: 400px; - once again, this will make all the cards of a height of 400px, and i am not sure if this is a desired effect - it does make all card of same height though
4. Put on a wrapper div a defined height, something like: height: 400px, and put the height property on the cards to 100%, like height: 100% - this is almost the same with number 3.

As you can see, there are solutions, but they might backfire on the whole project.
What i would suggest, is that you would add extra props to our cards so when that prop is passed, it would add a defined height property, and this way, only some cards would be the exact same height.

Hope that information helps you. Please let us know if we can help you with anything else.

Best,
Manu

[coljung]

if this is based on the actual material-ui, it should include flex implementation right ?

https://material-ui.com/layout/grid/

using the flex interactive demo, setting alignItems to 'stretch' should help you achieve your goal.

[coljung]

@einazare I was going to create another issue but i might as well ask here. Related to my previous comment about OP using flexbox grid options from material-ui.

I have a local version running, and i tried using the flexbox options found on: https://material-ui.com/layout/grid/ and the compiler gives me an error and complains about then:

Any ideas ?

---

EDIT: im an idiot!, had copied the wrong part of the code and now it works. My apologies.

[piyush97]

Can you please send a snippet of the approach you used?

[calebpsdinc]

Use CardFooter and set Card's height to 100%:

import React from "react"
import { Card, CardBody, CardFooter } from "components"

import withStyles from "@material-ui/core/styles/withStyles"

const styles = {
	fullHeightCard: {
		height: "100%",
	},
}

const Item = (props) => {
	const {classes} = props
	
	// 1-5 paragraphs to create card height variance
	let paragraphs = 1 + Math.floor(Math.random() * Math.floor(5))
	
	return (
		<Card className={classes.fullHeightCard}>
			<CardBody>
				{Array(paragraphs).fill().map((_,i) => (
					<p>{i+1}</p>
				))}
			</CardBody>
			<CardFooter>
				{'Footer content'}
			</CardFooter>
		</Card>
	)
}

export default withStyles(styles)(Item)

[piyush97]

Thanks @calebpsdinc

[SalahAdDin]

It seems this is not an available feature to do it native yet.

[Valdas-Stonkus]

I have the same problem and can not figuret it :(

[wascou]

Simple solution:

<Grid container>
    <Grid item xs={4} pr={1}>
        <Card sx={{ height: "100%" }}>
            <CardHeader/>

[AmberMichaelis]

I created equal card heights by adding inline styling of height='100%' in my Card component:

<Card height='100%'>
	<Image src={getCroppedImageUrl(post.background_image)} />
	<CardBody >
		<Heading fontSize='2xl'>{post.name}</Heading>
	</CardBody>
</Card>