What is the best way to ensure that all elements inside a Grid item extend to the bottom, except for the text?

I currently have four columns within a Grid container, each structured as follows:

    <Grid item>
       <Typography>Big Title 1</Typography>
         <Card className={classes.stretchMe}>
            <CardContent>
                Content
            </CardContent>
         </Card>
    </Grid>

My goal is to have the Card with the class stretchMe stretch to the bottom of its parent Grid item. However, due to the Typography component above it in each column, the Cards end up stretching beyond the height of their respective parent divs.

How can I ensure that all the Cards stretch only to the bottom of the parent Grid item (excluding the height of the Typography)?

Here's a slightly more intricate version of the code:

import React from 'react';

const useStyles = makeStyles(theme => ({
  divider: {
    borderBottom: `1px solid ${theme.palette.divider}`,
  },
  stretchMe: {
    height: '100%',
  },
}));

const Cards= () => {
  const classes = useStyles();

  return (
      <Grid container item xs={12} spacing={3} justify="space-between" alignItems="stretch">
        <Grid item xl={2} lg={2} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 1 
          </Typography>
          <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
              <Typography variant="h6">Little Title 1</Typography>
              <Avatar />
            </CardContent>
            <CardContent className={classes.divider}>
              <Typography variant="h6">Little Title 2</Typography>
              <Typography variant="h4">Content</Typography>
            </CardContent>
            <CardContent className={classes.divider}>
              <Grid container>
                <Grid item xs={6}>
                  <Typography variant="h6">Little Title 3</Typography>
                  <Typography variant="h4">Content</Typography>
                </Grid>
                <Grid item xs={6}>
                  <Typography variant="h6">Little Title 4</Typography>
                  <Typography variant="h4">Content</Typography>
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xl={4} lg={4} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 2
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent>Content</CardContent>
          </Card>
        </Grid>
        <Grid item xl={3} lg={3} md={6} xs={12} >
          <Typography variant="h4" >
            Big Title 3
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent>Content</CardContent>
          </Card>
        </Grid>
        <Grid item xl={3} lg={3} md={6} xs={12}>
          <Typography variant="h4">
            Big Title 4
          </Typography>
          <Card className="classes.stretchMe">
            <CardContent className={classes.divider}>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
              <div className={classes.teamProfile}>
                <Avatar/>
              </div>
            </CardContent>
          </Card>
        </Grid>
    </Grid>
  );
};

export default Cards;

Thank you,

Katie

EDIT

The issue lies in the fact that the Grid items are extending beyond the boundaries of the Grid containers. https://i.stack.imgur.com/0ms4y.png

Below is the desired outcome for reference:

https://i.stack.imgur.com/0PVKR.png

My suspicion is that the Big titles are causing the Cards to shift downwards?

cssreactjsmaterial-ui

Answer №1

Passing the prop as a variable using JSX, rather than a string, is recommended. For example:

<Card className={classes.stretchMe}>

Instead of:

<Card className="classes.stretchMe">

UPDATE TO CODE

  1. Add flex:1 to the cards for them to utilize all available space
  2. For the sub Grids, use container and set direction="column" to ensure correct element placement.

Your code should resemble this:

const useStyles = makeStyles((theme) => ({
    divider: {
    borderBottom: `1px solid ${theme.palette.divider}`
    },
    stretchMe: {
    height: "100%",
    flex: 1
    }
}));

const Cards= () => {
    const classes = useStyles();

    return (
    <Grid
        style={{backgroundColor:"cyan"}}
        container
        xs={12}
        spacing={3}
        justify="space-between"
        alignItems="stretch"
    >
        <Grid container direction="column" item xl={2} lg={2} md={6} xs={12}>
        <Typography variant="h4">Big Title 1</Typography>
        <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 1</Typography>
            <Avatar />
            </CardContent>
            <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 2</Typography>
            <Typography variant="h4">Content</Typography>
            </CardContent>
            <CardContent className={classes.divider}>
            <Grid container>
                <Grid item xs={6}>
                <Typography variant="h6">Little Title 3</Typography>
                <Typography variant="h4">Content</Typography>
                </Grid>
                <Grid item xs={6}>
                <Typography variant="h6">Little Title 4</Typography>
                <Typography variant="h4">Content</Typography>
                </Grid>
            </Grid>
            </CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item xl={4} lg={4} md={6} xs={12}>
        <Typography variant="h4">Big Title 2</Typography>
        <Card className={classes.stretchMe}>
            <CardContent>Content</CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item  xl={3} lg={3} md={6} xs={12}>
        <Typography variant="h4">Big Title 3</Typography>
        <Card className={classes.stretchMe}>
            <CardContent>Content</CardContent>
        </Card>
        </Grid>
        <Grid container direction="column" item xl={3} lg={3} md={6} xs={12}>
        <Typography variant="h4">Big Title 4</Typography>
        <Card className={classes.stretchMe}>
            <CardContent className={classes.divider}>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            <div className={classes.teamProfile}>
                <Avatar />
            </div>
            </CardContent>
        </Card>
        </Grid>
    </Grid>
    );
};

export default Cards;

Answer №2

This issue arises because the prop className was passed as a string instead of a variable.

The correct format should be className={classes.stretchMe}

import React from 'react';

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100%"
  },
  divider: {
    borderBottom: `1px solid ${theme.palette.divider}`,
    "&:last-child": {
      flex: "1"
    }
  },
  stretchMe: {
    display: "flex",
    flexDirection: "column",
    flex: "1"
  },
  gridItem: {
    display: "flex",
    flexDirection: "column"
  }
}));

const Cards= () => {
  const classes = useStyles();

  return (
    <Grid container spacing={2} className={classes.root}>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 1</Typography>
        <Card className={classes.stretchMe}>
          <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 1</Typography>
            <Avatar />
          </CardContent>
          <CardContent className={classes.divider}>
            <Typography variant="h6">Little Title 2</Typography>
            <Typography variant="h4">Content</Typography>
          </CardContent>
          <CardContent className={classes.divider}>
            <Grid container direction="row">
              <Grid item xs={6}>
                <Typography variant="h6">Little Title 3</Typography>
                <Typography variant="h4">Content</Typography>
              </Grid>
              <Grid item xs={6}>
                <Typography variant="h6">Little Title 4</Typography>
                <Typography variant="h4">Content</Typography>
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 2</Typography>
        <Card className={classes.stretchMe}>
          <CardContent>Content</CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 3</Typography>
        <Card className={classes.stretchMe}>
          <CardContent>Content</CardContent>
        </Card>
      </Grid>
      <Grid item xs={3} className={classes.gridItem}>
        <Typography variant="h4">Big Title 4</Typography>
        <Card className={classes.stretchMe}>
          <CardContent className={classes.divider}>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
            <div className={classes.teamProfile}>
              <Avatar />
            </div>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  );
};

export default Cards;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning the comments box on Facebook platform allows users to

Need assistance, I recently integrated the Facebook comments box into my Arabic website, but I am facing an issue where the position of the box keeps moving to the left. Here is an example of my website: Could someone please suggest a solution to fix the ...

javascriptcssfacebookfacebook-comments

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

htmlcssfirefoxrounded-corners

When attempting to close a material-ui modal by updating the state in React, it is important to avoid performing a state update on an unmounted component to

Recently, I integrated the modal component from material-UI into my project and utilized an "open" state hook to manage its visibility. Inside this component, I developed a Login page component that would send user information using Axios. Once the data wa ...

reactjsaxiosmaterial-ui

Shell script for swapping all occurrences of :*; with a comma

Below are some CSS color variables defined in hex: --state-success-text: #3c763d; --state-success-background: #dff0d8; To create a comma-separated list of these color variables, the output should look like this: state-success-text, state-success ...

cssbashsedcss-variables

Issue with Nextjs environmental variables not functioning in JavaScript pages

Currently, I am in the process of developing a Next.js website. Within my JavaScript file, I am fetching data from an API and assigning a token using the .env.local file. However, when attempting to access the .env variable that I've set up, it seems ...

javascriptreactjsnext.jsenvironment-variables

Tips on preserving CSS modifications made in Chrome Developer Tools Inspector to .vue file

Currently, I am in the process of setting up a new workflow where my goal is to streamline my work by using the Chrome DevTools Inspector to save any CSS changes directly to my .vue file. While the DevTools Workspaces feature can achieve this, it involves ...

cssvue.jsvuejs2google-chrome-devtools

jquery mobile integrated seamlessly between image1 and image2

One issue I'm facing with jquery.mobile is that there seems to be a gap between photo1 and photo2 when displayed on my mobile device. Any suggestions on how to eliminate this space and have the images appear seamlessly next to each other? Thank you in ...

htmlcssjquery-mobile

Place an image on top of adsense

Is there a way to overlay an image on top of Google AdSense ads in order to track user clicks? I am trying to implement an onclick method for when someone clicks on the ads. .ad-alert { width: 728px; height: 400px; background: #cccccc; mar ...

htmlcssadsense

Creating a contact page with Font Awesome icons similar to my design using Flexbox in CSS

How can I achieve the desired layout for this image? I have written some code and applied CSS to get the output, but I encountered an issue. When the text in my address section is too large, the icon gets misaligned and collapses. How can I fix this issue ...

htmlcssflexboxfont-awesome

What is the best way to create a fixed contact form on specific pages?

There is a Contact Form 7 on the webpage that I want to make fixed to the right side. Initially, the form is hidden and only the form button (open) is visible. When clicked, the form should open. ...

jquerycss

Retrieve data upon component mounting and deactivate the query in React-query

When navigating to a search result page, query parameters are passed to useQuery. I want the data to be fetched only when the user clicks the "Search" button after changing the search prompt. I attempted to use enabled: false and call refetch() on button ...

reactjstypescriptnext.jsreact-querytanstack

What is the method for displaying text instead of an item using state?

How can I ensure that only the single item I want to remove from my favorites list is replaced, instead of all items being eliminated with conditional rendering in React Native? import React, { useEffect, useRef, useState } from 'react' import { ...

reactjsreact-nativereact-hooksreact-navigation

Building an interactive array with checkboxes and mapping in React JS: A step-by-step guide

I am currently working on mapping a list of formations and would like to implement a dynamic array that updates when a checkbox is selected in the onChange event. The goal is to keep my organization updated with the formations they are able to dispense. ...

javascriptarraysreactjscheckboxmaterial-ui

What is the best way to cancel a setTimeout in a different function within a React JS application?

I'm currently working with the following code snippet: redTimeout = () => { setTimeout(() => { this.props.redBoxScore(); this.setState({ overlayContainer: 'none' }); }, 5000); } In addition, I h ...

javascriptreactjsreact-native

Having issues with the CSS dropdown menu not activating when hovering

I am facing an issue with a simple menu that includes a dropdown feature upon hovering. The code works perfectly fine in Fiddle, however, it fails to work when running the entire page locally on IE. Can someone please assist me? (here's my code at fi ...

cssdrop-down-menumenu

CSS shapes are extending beyond the boundaries of their parent container

I'm working on a small webpage and I am trying to incorporate 2 shapes in the background (see design screenshot attached). Using CSS, I created these shapes but I am facing an issue where the bottom right shape keeps extending beyond the container, ca ...

htmlcss

What are the steps to ensure Reactstrap is responsive?

I am just starting to explore reactstrap (rather than react-bootstrap) and I'm trying to figure out how to create different layouts for "mobile" and "desktop" views. How can I set up reactstrap to display the page one way in "mobile" view and another ...

reactjsresponsive-designbootstrap-5reactstrap

What can I do to prevent a panel from being pushed beneath two other panels when the window size is reduced?

These are my three panels: ___ _________ ___ | | | | | | | | | | | | | | | | | | | | | | | | |___| |_________| |___| When I resize the window slightly, the layout changes: ___ ...

asp.netcss

Issues arise when attempting to insert data into an HTML file using PHP

Good evening, I am having a problem where when I attempt to use PHP to replace "hello world" in an HTML file, it ends up completely empty each time. Can anyone point out what mistake I might be making? Here are the HTML and PHP files: <!DOCTYPE html&g ...

phphtmlcss

Customize hover effects in tailwind css with dynamic values

I am trying to customize the text color on hover based on different category names using tailwind CSS. In my configuration, I have assigned a specific color code for each category like this : tailwind.config.js theme: { extend: { } }, co ...

javascriptcssnext.jshovertailwind-css