I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve.
The structure of my grid is as follows:
https://i.sstatic.net/TEU2a.png
My goal is to ensure that each section inside the card starts at the same point.
For example, the icons are correctly aligned as their tops match up.
The titles also appear fine since their tops are aligned.
However, the content text is not properly aligned across the three cards as their tops do not align.
Additionally, the "learn more" buttons should be aligned and ideally positioned at the bottom of the card. Currently, they are displayed at different heights.
The code I have written so far is outlined below:
HomeGrid.jsx:
import React, { useState, useEffect, Fragment } from 'react'
import { useStyles } from '../styles'
import SimpleCard from '../card/SimpleCard'
import { Grid, Container, Paper } from '@material-ui/core'
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'
import FindInPageIcon from '@material-ui/icons/FindInPage'
import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet'
const HomeGrid = () => {
const classes = useStyles()
return (
<Container disableGutters className={classes.homeGridContainer}>
<Grid
alignItems="stretch"
alignContent="center"
justify="center"
wrap="wrap"
container
spacing={10}
>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<QuestionAnswerIcon fontSize={'large'} />}
title={'Speak'}
content={'Speaking to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<FindInPageIcon fontSize={'large'} />}
title={'Finding someone like this example can be great'}
content={'Finding to someone can help blah blah'}
></SimpleCard>
</Grid>
<Grid item xs={12} md={4} align="center">
<SimpleCard
icon={<AccountBalanceWalletIcon fontSize={'large'} />}
title={'No Fees Here'}
content={'No Fees shalt find thou'}
></SimpleCard>
</Grid>
</Grid>
</Container>
)
}
export default HomeGrid
SimpleCard.jsx:
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import { CardActionArea, CardMedia } from '@material-ui/core'
import QuestionAnswerIcon from '@material-ui/icons/QuestionAnswer'
const useStyles = makeStyles({
simpleCard: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
})
const SimpleCard = (props) => {
const classes = useStyles()
return (
<Card style={{ height: '100%' }}>
<CardContent>
{props.icon}
<Typography variant="h6" component="h2">
{props.title}
</Typography>
<Typography variant="body1" component="p">
{props.content}
</Typography>
</CardContent>
<CardActions className={classes.actions}>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
)
}
export default SimpleCard
I have attempted to implement the solution provided in this answer: enter link description here, but it does not seem to work as expected.
Could someone please offer guidance or assistance with this issue?